本節書摘來異步社群《高性能響應式web開發實戰》一書中的第2章，第2.2節，作者： 李光毅 責編： 楊海玲，更多章節内容可以通路雲栖社群“異步社群”公衆号檢視。
上一節講的像素密度和web開發有什麼關系？在我們編寫樣式代碼時，常會用到另一個像素機關px。為了和裝置像素區分開，我們把它稱為css像素。如果說裝置像素給我們的印象是機械的、固定的、實體的，那麼css像素将會是靈活的、虛拟的、相對的。
為什麼說它是相對的？
假設我在頁面上畫一個300 px寬度的塊級元素。一般情況下，塊級元素隻相當于頁面的部分寬度。如果使用浏覽器的頁面放大功能，10倍地放大頁面，很快塊級元素就會充滿整個頁面。但吊詭的是，此時我們既沒有改變浏覽器的寬度，也沒有改變容器的樣式寬度，那麼浏覽器為我們做了什麼呢？它把每一個css像素的面積放大了，如圖2-12所示。
css像素預設與系統分辨率下像素大小相等。那麼，在标清裝置中，一個css像素應該是與一個裝置像素大小相等。但是，在高清裝置或者使用者縮放的過程中，一個css像素也可以大于或等于多個裝置像素，如圖2-13所示。
有關高清裝置被诟病的問題，還有一個問題未被提及：假設在原生應用（注意，不是web）的開發中，如果必須以裝置像素為機關進行開發，那會是非常痛苦的一件事。以iphone 3gs為參照，在3gs中，一個系統分辨率像素等于1個裝置像素；在iphone 4中，一個系統分辨率像素等于2個裝置像素；在galaxy s4中，一個系統分辨率像素等于3個裝置像素；在iphone 6 plus中，一個系統分辨率像素等于2.46個裝置像素。那麼，如果一個按鈕在iphone 3gs中大小為100×100裝置像素，在iphone 4中大小就應該是200×200裝置像素，在galaxy s4中就應該是300×300裝置像素，在iphone 6 plus中就應該是246×246裝置像素。但是，我們實在無法為每一台裝置根據它的裝置像素準備如此多的素材。
我們希望有這麼一種抽象的機關，隻需告知手機它這個按鈕或者素材占用幾個這樣的“抽象機關”，在顯示時它就能自動縮放至合适的具體裝置像素值。例如，ios系統中的pt就是這樣一個機關，當我們告訴它按鈕占用的寬度是100×100 pt時，在iphone 3gs中，它就意味着占用100×100的裝置像素；在iphone 4中，它就占用200×200裝置像素。也就是說，系統會根據給出的pt值，再根據系統分辨率像素與裝置像素的比值，換算出目标應該占用的大小。
上面所說的這種抽象機關稱為與裝置無關像素（device independent pixel）。
同理，css像素也是與裝置無關像素。我們不用關心在不同裝置上一個css像素會比對多少個裝置像素，浏覽器會根據dpr為我們适配，在css基礎上根據dpr做适當放大或者拉伸。但問題是，因為字型是矢量的關系，被放大後仍然足夠清晰。而身為标量的圖檔則會變得模糊，因為拉伸狀态下一個css像素需要橫跨多個裝置裝置像素，每張圖檔上的單個像素資訊仍然要被多個裝置像素瓜分顯示，自然就變得模糊起來。圖2-12中對比的是同樣css尺寸在高清和标清下的效果，很明顯左側的高清裝置會顯得更模糊。
為了解決高清裝置中圖檔素材會變模糊的問題，需要為高清裝置提供更大尺寸、細節更豐富的圖檔。此外，高清圖檔可以向下相容，我們可以用css像素控制高清圖檔在标清裝置上的大小，這樣一張圖檔就走遍天下了，解決了響應式圖檔中的适配問題。可新的問題又出現了。
（1） 如何區分出高清裝置和标清裝置呢？如何為不同的裝置提供不同的樣式呢？
（2）如果使用者在網絡資訊較差的手機上通路網站我們仍然提供高清圖檔，這是否有失偏頗？能否做到為不同的裝置，甚至為不同的網絡環境，提供不同的圖檔素材？
這兩個問題留到第5章解決。