媒體屬性

1. 前言

上一小節(jié)我們帶領大家認識了一下媒體查詢的一些小知識，知道了媒體查詢都有哪些設備。

那么問題來了，手機、平板、筆記本和臺式機它們幾個通通被歸為了一類設備：屏幕設備(screen)，在區(qū)分別打印設備還是屏幕設備的時候非常好區(qū)分，但如果區(qū)分移動端還是PC端的時候要怎么做呢？

2. 媒體屬性

雖然無論手機、平板、筆記本還是臺式機都會被歸為屏幕設備(screen)，但即使是同一種設備也會擁有自己的一套屬性，比如寬啊、高啊什么的，我們就可以利用這些屬性來判斷用戶到底是哪一種屏幕設備：

為了方便大家的學習，我只挑了這四個最常用的，其實完整版還有很多很多…

但掌握這四個就以及足以應對日常開發(fā)的需求了，而且這四個看似不太好理解，實際上咱們一講大家就能明白：

• max-width: 最大寬度就相當于 ≤ （寬度小于等于）
• min-width: 最小寬度就相當于 ≥（寬度大于等于）
• max-height: 最大高度就相當于 ≤（高度小于等于）
• min-height: 最小高度就相當于 ≥（高度大于等于）

而且后面那倆最大、最小高度什么的很少會用到，實際上我們就是靠寬度來檢測用戶使用的是哪種屏幕設備的。

也就是說你只需要記住這倆就行了：

• max-width: 最大寬度就相當于 ≤ （寬度小于等于）
• min-width: 最小寬度就相當于 ≥（寬度大于等于）

3. 分辨率

那么什么是最大、最小寬度呢？我們可以拿手機和電腦來舉例，假如你手中目前正在用一臺 iPhone X 來觀看這個網頁，那么 iPhone X 的分辨率是 375 x 812 。

有些同學看到這里可能會說：老師你是不是沒用過 iPhone ？iPhone 怎么可能就這點分辨率呢？好歹也是大名鼎鼎的視網膜屏幕，人家官網上明明寫的就是 iPhone X 為 2436 x 1125 像素分辨率，當然這一看就是高x寬，咱們給它倒過來變成寬x高：1125 x 2436 ，可遠遠比你說的那個什么 375 x 812 高多了！

同學們如果有這樣的疑慮的話，請按下你鍵盤上的 f12 鍵打開控制臺(蘋果電腦是?+?+ i)：

按下這個鍵，網頁就會變成手機的格式，然后點擊上面類似下拉菜單的這么一個東西：

這里可以選擇市面上主流的一些手機型號，大家可以看看分辨率都是多少：

那這就奇怪了，這上面所有手機分辨率都很低，可以肯定的是現(xiàn)在的手機根本沒有這么低的分辨率，那這到底是怎么一回事呢？答案要從很久很久以前說起：

在移動互聯(lián)網剛剛興起的時候，比較主流的智能手機是諾基亞塞班系統(tǒng)的類似于這種的3.2英寸的手機：


如果你還對這種手機有印象的話，那么恭喜你?，你已經老了。

這種手機是當時最實惠好用的智能手機，超大屏幕(3.2寸)，當然多少也是有點毛病的，比如不支持多點觸控，必須使勁用指甲按屏幕才能有反應(電阻屏)，偶爾還會死機等…

直到后來 iPhone 4 的出現(xiàn)，大家相信或多或少也聽過 iPhone 4 當年到底有多火，火到當初不少新聞都在報道什么孩子攀比非要逼著父母給自己買 iPhone。

甚至有一小部分買了 iPhone 手機的用戶在街上都不把手機放進口袋里，而是拿在手里時不時的就拿起來顯示一下自己的"尊貴身份"。

最夸張的一則新聞是有個年輕人為了得到 iPhone 不惜賣掉自己的一個腎(這是真事)：

iPhone 4 能一下子這么火是有原因的，大家也知道蘋果公司的操作系統(tǒng)用起來非常的順滑，而且屏幕色彩也是非常的靚麗，最重要的是它的屏幕是世界上第一個視網膜屏，視網膜屏指的就是不仔細看壓根兒就看不出屏幕上的像素點，而同時期的其他智能手機(當時智能手機不僅僅有塞班，安卓在那個時候也已經開始崛起了)，但沒有哪一款手機可以擁有這么大的分辨率，即使屏幕大小都差不多，比如諾基亞的3.2寸和蘋果的3.5寸，雖然尺寸相差并不是特別大，但諾基亞的顆粒感明顯。

當時我還記得我買了一款號稱全世界屏幕最大、最薄的手機：索愛LT15i

當時它的屏幕尺寸為4.2寸，足足比 iPhone 4 的3.5寸大了一圈，我希望能用它的超大屏幕來掩蓋住班里同學 iPhone 的光芒(當時我也有點攀比，別學我哈)，但當我拿到手機后，雖然屏幕尺寸很令人驚艷，但還是有著肉眼可見的顆粒感，細膩程度還是不如 iPhone 4 。

導致這個問題的最主要原因就是每英寸的分辨率(DPI)，來對比一下當年的這三款手機:

喬布斯：人眼能分辨出的最大分辨率是300dpi，超過這個分辨率，人的眼睛就難以看出顆粒感

所以這就是視網膜屏幕的由來，可以看到在當時沒有哪個手機的DPI能比得過 iPhone 4 ，當然咱們說這些并不是為了一頓狂吹 iPhone 4 的屏幕有多好，而是為了引出一個歷史遺留問題：邏輯像素。

4. 邏輯像素

當時移動互聯(lián)網已經悄然興起，伴隨著塞班的隕落，安卓和IOS正在強勢崛起，所以很多網站需要適配手機的分辨率，但 iPhone 遙遙領先于眾多競爭對手的分辨率就會帶來這樣一個問題：

假如我在頁面里寫了一個300像素(px)的按鈕，在還沒被淘汰的諾基亞手機上差不多占了83%的屏幕寬度，在超大屏幕的安卓手機上差不多要占據(jù)62%的屏幕寬度，而在視網膜屏幕的 iPhone 手機上居然只占了還不到一半的屏幕寬度！

假如在安卓或者諾基亞上顯示成上面那樣，那么在 iPhone 中300px的按鈕就會顯示成下面這樣：

這樣太費眼睛了，iPhone 用戶瀏覽網頁難道還要拿著放大鏡去看嗎？那視網膜屏幕還有什么意義呢？

于是乎，邏輯像素這個概念出現(xiàn)了！

iPhone 4 的物理像素為 960 x 640，不知為何手機廠商宣傳的時候總喜歡用高 x 寬，可能是因為高的數(shù)字大一些，放在前面好看？咱們給改成寬 x 高：640 x 960，那么它的邏輯像素就是 320 x 480，邏輯像素是什么呢？就是你寫CSS的時候寫的那個px。

在電腦端通常1px對應的就是屏幕的一個物理像素點，但手機之間的差異過大，為了抹平這個差異，高分辨率手機1px對應的就是兩個物理像素點，低像素手機1px還是對應1個物理像素點，這樣就不會出現(xiàn)同樣 300px 的按鈕，一個占了屏幕90%，另一個只占了一半的情況了。

現(xiàn)在的手機分辨率更加的夸張，所以 iPhone X 的1px對應的是三個物理像素點：

這回再來看一下，375 x 812 的三倍是不是恰好就是 iPhone X 的真正像素 1125 x 2436 了呢？

雖然當年 iPhone 和安卓的分辨率差距很大，但經過多年的發(fā)展，如今的安卓屏幕也不至于比 iPhone 差那么多了，那么這種邏輯像素還有它存在的意義嗎？

其實還是有意義的，隨著科技的發(fā)展手機屏幕的分辨率一飛沖天，但是電腦的分辨率貌似沒有什么太大的變化。
比如在我剛上大學時，大一點的筆記本電腦是 1920 x 1080 的分辨率，小一點的是 1366 x 768。
結果我現(xiàn)在都畢業(yè)好幾年了，雖然也出現(xiàn)了一些高分辨率的2K電腦，但主流情況依然是大一點的筆記本 1920 x 1080，小一點的 1366 x 768。

如果取消了邏輯像素，1px 對應的就是屏幕上的一個物理像素點的話，那么iPhone X 橫過來就變成了 2436 x 1125 分辨率，比電腦的 1920 x 1080 分辨率還高，我們就沒有辦法根據(jù)像素來判斷用戶到底現(xiàn)在用的是手機設備還是電腦設備了，但是現(xiàn)在 iPhone X 的邏輯分辨率只有 375 x 812，這樣就很好判斷了。

5. 小結

本章中我們詳細講述了為何在程序中的 iPhone 分辨率和現(xiàn)實中的 iPhone 分辨率有很大的差別，同時引出了邏輯像素的這么一個概念。

并且我們還羅列了一些媒體查詢的常用屬性，那么下一小節(jié)我們就來詳細的講解一下如何用媒體屬性和邏輯操作符進行結合來判斷用戶當前到底在使用何種設備。