像素和CSS媒體查詢?

01-14

我們知道像素是一個相對單位，不是一個擁有固定大小的點單位。但我想請問：在CSS中媒體查詢用到的PX究竟是怎樣一個單位？乃至我想問：在CSS中，像素是否已經不再是一個相對單位，而是一個擁有固定寬度的單位？
舉例：
我用媒體查詢 @media (min- width: 1200px) {……}這樣的語句來控制在大於1200px的屏幕才顯示某個DIV。

我用手機訪問這個頁面時，此DIV卻不顯示，但我的手機解析度是1920*1080，按道理講是滿足min- width: 1200px這條件的，但為什麼不顯示呢？
難道PX是擁有固定長度的單位？
謝謝解答！

其實幾句話就說明白了呀.......

css里所有的px都是css pixel，其顯示大小是相對的而不是絕對的，是設備相關的。

而css pixel * devicePixelRatio = 實際屏幕像素。

(平時電腦屏幕的devicePixelRatio都是1所以感覺不到，會讓你誤以為css里的px就是實際屏幕像素)

同時media query使用的px顯然也是css pixel。

可以用chrome按f12開emulator看，一目了然。

模擬器里有很型號可以選擇，比如Nexus 5, iPhone等等

下圖左邊的就是css pixel，右邊是devicePixelRatio

如圖，Nexus 5的css pixel是360x640，devicePixelRatio是3，實際屏幕尺寸就是(360*3)x(640*3)=1080x1920 (實際上應該根據屏幕尺寸和devicePixelRatio來反推css pixel)

可以看到大部分安卓設備的css pixel尺寸都是360x640

你可以這麼簡單理解:

不管是1080x1920的屏幕還是720x1280的屏幕，對於移動端瀏覽器來說，尺寸都是360x640

所以，寫css的時候以css pixel為準，也就是說：假設設計圖做成了720x1280的，那麼css里所有尺寸都除以2即可。

而對於圖片，比如一張實際大小100*100px的圖片，並且width和height都設了100px(注意這裡的px是css pixel)，實際佔用了屏幕的像素數就是(假設devicePixelRatio是3)300*300px(注意這裡的px是真實的屏幕像素)

所以，如果希望網頁的元素在高ppi設備上顯示不模糊(比如1080x1920屏幕的手機)，點陣圖應該做3倍的尺寸(比如做300*300px的圖，然後在css中設width和height為100px)，svg(矢量圖)就無所謂了。

(所以svg大法好！png都是異端！)

因此在你的例子中，應該寫min-width:400px

同時最好加上&
（絕大部分1080x1920屏幕的設備devicePixelRatio都是3，1200/3=400）

手機瀏覽器會找你的&,如果指定了width，就會把頁面放到指定width的viewport裡面取，如果沒有指定，則默認值有的是980，具體根據瀏覽器來定的。

送你一個文檔鏈接：Using the viewport meta tag to control layout on mobile browsers

還有像素的問題：

此像素非彼像素A pixel is not a pixel is not a pixel

因為大多數1920*1080的手機上是把網頁當成 640*360 縮小三倍顯示處理的，所以生效的其實是360這個寬度

前面幾個答案從實際應用層面解答了，不過我想了下你的疑問是針對單位的，那麼從「像素是一個相對單位」這句話入手做個解答吧。

一、像素的顯示定義

像素，即圖像元素的基本單位。

解析度，即屏幕圖像的精密度，是指顯示屏所能顯示的像素的多少。

對網頁開發者來說，像素的概念多啟蒙於桌面顯示器，並且基本只需要知道這一單位。當跨屏到其他設備時，會有難以理解的諸多單位相關概念出現，如dpdpippi等進而產生混亂，從硬體屏幕的顯示差異入手理解會清晰一些。

我們知道，圖像顯示需要媒介，有如台式機、手機、相機和紙張實物等。像素基於圖像，屏幕解析度基於像素，而跨屏設備的屏幕解析度與物理尺寸無關（是的無關），因此在電子設備上，像素是一個純電子尺寸而非物理尺寸。

也就是說呢，跨屏設備的解析度像素之間是存在物理差異的。舉個栗子，同為1280解析度寬的桌面顯示器與三星NOTE，一個是17"，寬為13.27"(33.72cm)；一個是5.3"，寬為4.49"(11.42cm)。一個像素單位所佔的物理空間分別為：33.72/1280 = 0.02634(cm) 與 11.42/1280=0.0089(cm)，相差3倍。

二、手機瀏覽器的邏輯解析度與媒體查詢

（邏輯解析度稱為邏輯pt解析度會更為精確，這裡為便於理解暫且忽略pt）

手機廠商會提供一個解析度如三星NOTE為1280*800（物理解析度），但此解析度通常不是手機網頁瀏覽器的渲染尺寸，這是因為手機網頁瀏覽器是以邏輯解析度進行渲染的，而邏輯解析度=物理解析度/devicePixelRatio。

普通密度桌面顯示屏的devicePixelRatio=1 高密度桌面顯示屏(Mac Retina)的devicePixelRatio=2 主流手機顯示屏的devicePixelRatio=2或3

初代iPhone的devicePixelRatio=1，後面隨著手機顯示屏的精度的提升，devicePixelRatio基本都能達到2及以上，並且如iPhone6+還出現像素解析度縮樣的處理，理解起來需要了解的概念更多，從相對簡單的顯示方式上入手分析也可以避免越來越混亂的情況。

devicePixelRatio的具體概念理解需要涉及ppipt等，這個問題下我暫且解說不好，進一步了解的話可以先到這個問題：iPhone 6 Plus的邏輯解析度為什麼是414x736？ - IOS app開發 android app開發

讓手機瀏覽器依照物理解析度的尺寸顯示的方式有一個半，一是如winter大神實踐的手機淘寶對retina使用的0.5的scale，二是target-densitydpi=device-dpi的meta聲明，稱為半個是因為webkit已移除這個屬性，安卓舊的固件版本（4.4以下不確認）可以驗證測試。

垃圾知乎, 不玩了

搜一下關鍵詞 window.devicePixelRatio

這個，，，你先用圖片測試一下你的道理正確嗎？試一試一張1200px的圖片在你當前頁面怎麼顯示的