此文改題為“自我超越”更合適些。......實際上，最近幾年，出現(xiàn)了一個問題：早在2013年初，也就是我正在寫此文的時候，以物理設(shè)備為載體的web，我們還拿不出一套精準(zhǔn)的設(shè)計方案，甚至在較長的時間內(nèi)依然如此。但如果知道了設(shè)備的各項物理特性，問題就迎刃而解了——如果說目前做不到，但在不久的將來一定行。

[[71002]]

盡管設(shè)備的物理特征全然不同，但卻可以擁有相似的屏幕分辨率。iPad(1代)屏幕尺寸9.7″，分辨率1024 × 768 ，像素132 ppi。Kindle Keyboard 3G屏幕尺寸6″，分辨率768 × 1024，像素212ppi。圖片來源：kodomut.

這就是大家熟知的“resolution media query”，盡管它作為media queries的規(guī)范已經(jīng)有相當(dāng)一段時間了，但這并不意味著所有人都會守規(guī)矩。不過還好，WebKit走在了前面，并極力推動它付諸實踐。那么，我們到底該怎樣充分利用這個好東東呢？請看下文分解。

兩種Queries之間的細(xì)微區(qū)別

首先，我假定resolution-only media query是唯一辦法。請看下面代碼：

@media (min-resolution: 250dpi) { } 

這行代碼只是將低分辨率圖片替換為高分辨率的，僅此而已。除此之外，我想不出其他好處。作為web設(shè)計師，其實我們并不關(guān)心分辨率。既然我們的設(shè)計要考慮人性化，當(dāng)然得對人們閱讀內(nèi)容的邊框進(jìn)行仔細(xì)斟酌。***有 width:1in 這樣的單位，這樣我們就不用考慮各種設(shè)備的尺寸?？上У氖?，當(dāng)今的社會是數(shù)字化的社會，物理尺寸和數(shù)字化的像素并不一致，做為設(shè)計師，我們得找到用來填補(bǔ)兩者之間的鴻溝的東西，那就是resolution media query。

好了，現(xiàn)在我給你看下，一小行代碼竟能產(chǎn)生如此不同，一定會讓你驚奇不已 (當(dāng)然我也不敢保證你讀完此文一定會有所收獲)

比較如下兩個media-query聲明：

@media (min-resolution: 341dpi) and (min-width: 767px) > { } 

與

@media (max-resolution: 131dpi) and (min-width: 767px) > { } 

乍一看，是不是沒啥子區(qū)別？當(dāng)然不是了。***段聲明是針對HTC Windows Phone 8X，而第二段針對iPad2。通過使用resolution query，可以將大小不同的設(shè)備區(qū)分開來。

目前看來，@media (min-width: 767px){ }對HTC和iPad而言沒有什么區(qū)別，因為他們的寬度都是768像素，但是iPad的分辨率比較低（1024*768），而HTC的分辨率比較高（1280*768），最不可思議的是，iPad有10英尺寬，而HTC只有4.3英尺，不到前者的一半大小。

通過Resolution Media Query 和 Width Query 的配合使用，我們能夠?qū)⒕哂型瑯訉挾鹊牟煌笮〉脑O(shè)備區(qū)分開，從而來相應(yīng)的調(diào)整設(shè)計中的元素布局。前面說過的，我們對屏幕的分辨率并不關(guān)心，因為我們在響應(yīng)式設(shè)計中使用斷點, 這樣可以大致判斷一個網(wǎng)站的內(nèi)容是顯示在一個尺寸大的還是小的物理設(shè)備上—從而使用合適的字體或者自動調(diào)整元素布局。但我們到底該如何準(zhǔn)確區(qū)分大小設(shè)備呢？不好意思，做不到。因為我們必須從每個項目的實際出發(fā)，這個設(shè)備在這個項目中是小設(shè)備，但在另外一個項目中，可能被歸類為大設(shè)備。不過我按照一個范圍，做了一些計算并設(shè)計了一個定理，這個定理多少會讓你對大小設(shè)備的區(qū)分有所認(rèn)識。

物理尺寸調(diào)查簡單定理(PSINET)

理論：在一個組合的查詢中，如果分辨率的寬度和高度中的較小值與PPI的比值大于5，那么基本上可以歸屬為大設(shè)備，如果小于5，基本上可以歸屬為小設(shè)備。如果得分接近于5，那么是一個中等的設(shè)備，物理上的尺寸接近于1張A4紙的大?。?1*29.7cm）。

下面是一組檢測此公式的設(shè)備清單。我已根據(jù)設(shè)備的屏幕尺寸、分辨率、單位像素密度以及PSINET的得分，將它們列表如下：

較大的設(shè)備

較小的設(shè)備

中等尺寸的設(shè)備

確定設(shè)備大小就這么簡單？那倒不是，這就是之所以稱為定理的原因。它基于可靠的推論及經(jīng)驗論證，并且經(jīng)由科學(xué)方法總結(jié)得出的。但它并不代表權(quán)威，只是通過抓取一小撮鹽（也可以是一大堆NaCl）并進(jìn)行了提煉而已。在resolution media query以及與之相關(guān)的工作成為Web重點的未來時代，這個定理將會發(fā)揮有價值的一面。

打破定理

就像所有崇尚科學(xué)方法的人，我也試圖打破自己創(chuàng)立的定理。于是，我想出了一個奇怪的設(shè)備，它有2英寸長，20英寸寬，這樣的設(shè)備屏幕有20.09英寸，240 × 40像素，顯示的分辨率僅為11.94PPI。盡管它有幾乎半米長，但PSINET分?jǐn)?shù)為2.01，很顯然應(yīng)該劃分到小型設(shè)備的類別。原因很簡單：2英寸的寬度而已，因為PSINET得分忽略掉了設(shè)備長度和寬度中較大的那個數(shù)值，所以這兩者的尺寸差距越大，PSINET得分的可靠性就越低。當(dāng)然，這種怪胎級的設(shè)備是不可能存在的，但它證明了此定理可以被打破。

在實際中的應(yīng)用

除了上述很直觀的方式，resolution media query還有很多用法。

輸入 Enquire.js。很多人都沒聽說過，這是一個很棒的javascript庫，在匹配media queries的時候，這個庫能夠提供很特別的腳本。

我們可以使用Enquire.js甚至只用window.matchMedia這個本地javascript方法，就能區(qū)分手機(jī)，平板和電腦用戶，這比只用width queries可靠得多。下面是一個Enquire.js的用法：

enquire.register("screen and max-resolution: 150dpi and max-width: 300px", function() {  
    alert('My, what a small screen you have there, Grandma!')  
}); 

結(jié)合media query和CSS，并且使用能夠識別分辨率的javascript庫，就足以賦予我們掌握未來“物理網(wǎng)絡(luò)”的能力。想像一下，這樣我們就能看到跨越半個地球的博物館里矗立著的雕塑以1：1的比率顯示在任何設(shè)備上，或者在網(wǎng)上選購訂婚戒指時，精確地看到24克拉的鉆戒到底有多大。在實際生活中的應(yīng)用不勝枚舉。

從響應(yīng)式web設(shè)計角度來考慮，不管用戶使用的是什么設(shè)備，我們當(dāng)然熱衷于提供***的用戶體驗。與上述的media query相比，這種方式?jīng)]什么挑戰(zhàn)但多了一絲折騰。相互指責(zé)毫無意義，因為我們誰也改變不了當(dāng)前的設(shè)備生態(tài)系統(tǒng)。制造商繼續(xù)推出基于分辨率和像素密度的設(shè)備，這很好，因為這是他們的商業(yè)行為。作為身在高處的瀏覽器廠商應(yīng)該提供給我們設(shè)計人員所需的工具以便盡可能地創(chuàng)造***用戶體驗，并且這本身就是他們的職責(zé)所在，同時我向那些通過WebKit***resolution media query實現(xiàn)的好人們表示深深的敬意。

原文鏈接：http://www.oschina.net/translate/responsive-web-design-with-physical-units