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

[[71002]]

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

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

兩種Queries之間的細微區別

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

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

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

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

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

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

與

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

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

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

通過Resolution Media Query 和 Width Query 的配合使用，我們能夠將具有同樣寬度的不同大小的設備區分開，從而來相應的調整設計中的元素布局。前面說過的，我們對屏幕的分辨率并不關心，因為我們在響應式設計中使用斷點, 這樣可以大致判斷一個網站的內容是顯示在一個尺寸大的還是小的物理設備上—從而使用合適的字體或者自動調整元素布局。但我們到底該如何準確區分大小設備呢？不好意思，做不到。因為我們必須從每個項目的實際出發，這個設備在這個項目中是小設備，但在另外一個項目中，可能被歸類為大設備。不過我按照一個范圍，做了一些計算并設計了一個定理，這個定理多少會讓你對大小設備的區分有所認識。

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

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

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

較大的設備

較小的設備

中等尺寸的設備

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

打破定理

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

在實際中的應用

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

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

我們可以使用Enquire.js甚至只用window.matchMedia這個本地javascript方法，就能區分手機，平板和電腦用戶，這比只用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!')  
}); 

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

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

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