媒體屬性

1. 前言

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

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

2. 媒體屬性

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

為了方便大家的學(xué)習(xí)，我只挑了這四個(gè)最常用的，其實(shí)完整版還有很多很多…

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

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

而且后面那倆最大、最小高度什么的很少會(huì)用到，實(shí)際上我們就是靠寬度來(lái)檢測(cè)用戶使用的是哪種屏幕設(shè)備的。

也就是說(shuō)你只需要記住這倆就行了：

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

3. 分辨率

那么什么是最大、最小寬度呢？我們可以拿手機(jī)和電腦來(lái)舉例，假如你手中目前正在用一臺(tái) iPhone X 來(lái)觀看這個(gè)網(wǎng)頁(yè)，那么 iPhone X 的分辨率是 375 x 812 。

有些同學(xué)看到這里可能會(huì)說(shuō)：老師你是不是沒(méi)用過(guò) iPhone ？iPhone 怎么可能就這點(diǎn)分辨率呢？好歹也是大名鼎鼎的視網(wǎng)膜屏幕，人家官網(wǎng)上明明寫(xiě)的就是 iPhone X 為 2436 x 1125 像素分辨率，當(dāng)然這一看就是高x寬，咱們給它倒過(guò)來(lái)變成寬x高：1125 x 2436 ，可遠(yuǎn)遠(yuǎn)比你說(shuō)的那個(gè)什么 375 x 812 高多了！

同學(xué)們?nèi)绻羞@樣的疑慮的話，請(qǐng)按下你鍵盤(pán)上的 f12 鍵打開(kāi)控制臺(tái)(蘋(píng)果電腦是?+?+ i)：

按下這個(gè)鍵，網(wǎng)頁(yè)就會(huì)變成手機(jī)的格式，然后點(diǎn)擊上面類似下拉菜單的這么一個(gè)東西：

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

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

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


如果你還對(duì)這種手機(jī)有印象的話，那么恭喜你?，你已經(jīng)老了。

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

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

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

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

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

當(dāng)時(shí)我還記得我買了一款號(hào)稱全世界屏幕最大、最薄的手機(jī)：索愛(ài)LT15i

當(dāng)時(shí)它的屏幕尺寸為4.2寸，足足比 iPhone 4 的3.5寸大了一圈，我希望能用它的超大屏幕來(lái)掩蓋住班里同學(xué) iPhone 的光芒(當(dāng)時(shí)我也有點(diǎn)攀比，別學(xué)我哈)，但當(dāng)我拿到手機(jī)后，雖然屏幕尺寸很令人驚艷，但還是有著肉眼可見(jiàn)的顆粒感，細(xì)膩程度還是不如 iPhone 4 。

導(dǎo)致這個(gè)問(wèn)題的最主要原因就是每英寸的分辨率(DPI)，來(lái)對(duì)比一下當(dāng)年的這三款手機(jī):

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

所以這就是視網(wǎng)膜屏幕的由來(lái)，可以看到在當(dāng)時(shí)沒(méi)有哪個(gè)手機(jī)的DPI能比得過(guò) iPhone 4 ，當(dāng)然咱們說(shuō)這些并不是為了一頓狂吹 iPhone 4 的屏幕有多好，而是為了引出一個(gè)歷史遺留問(wèn)題：邏輯像素。

4. 邏輯像素

當(dāng)時(shí)移動(dòng)互聯(lián)網(wǎng)已經(jīng)悄然興起，伴隨著塞班的隕落，安卓和IOS正在強(qiáng)勢(shì)崛起，所以很多網(wǎng)站需要適配手機(jī)的分辨率，但 iPhone 遙遙領(lǐng)先于眾多競(jìng)爭(zhēng)對(duì)手的分辨率就會(huì)帶來(lái)這樣一個(gè)問(wèn)題：

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

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

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

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

iPhone 4 的物理像素為 960 x 640，不知為何手機(jī)廠商宣傳的時(shí)候總喜歡用高 x 寬，可能是因?yàn)?code>高的數(shù)字大一些，放在前面好看？咱們給改成寬 x 高：640 x 960，那么它的邏輯像素就是 320 x 480，邏輯像素是什么呢？就是你寫(xiě)CSS的時(shí)候?qū)懙哪莻€(gè)px。

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

現(xiàn)在的手機(jī)分辨率更加的夸張，所以 iPhone X 的1px對(duì)應(yīng)的是三個(gè)物理像素點(diǎn)：

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

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

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

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

5. 小結(jié)

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

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