两种Queries之间的细微区别
比较如下两个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- 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的得分，将它们列表如下：
较大的设备
| 设备名称 | 屏幕尺寸 (inches) | 分辨率 | PPI | PSINET 得分 |
|---|---|---|---|---|
| Apple iMac | 27 | 2560 × 1440 | 109 | 13.00 |
| Sony Vaio F | 16.4 | 1920 × 1080 | 134 | 8.05 |
| Apple MacBook Pro RD | 13 | 2560 × 1600 | 227 | 7.04 |
较小的设备
| 设备名称 | 屏幕尺寸 (inches) | 分辨率 | PPI | PSINET 得分 |
|---|---|---|---|---|
| Sony PSP | 4.3 | 480 × 272 | 128 | 3.75 |
| Kindle Keyboard 3G | 6 | 768 × 1024 | 212 | 3.62 |
| Kindle Fire | 7 | 1024 × 600 | 169 | 3.55 |
| Samsung Galaxy S | 4 | 480 × 800 | 160 | 3.00 |
| Samsung Galaxy NoteII | 5.5 | 720 × 1280 | 267 | 2.69 |
| Samsung Galaxy S IV | 5 | 1080 × 1920 | 441 | 2.62 |
| HTC Butterfly | 5 | 1080 × 1920 | 441 | 2.62 |
| Samsung Galaxy Grand I9082 | 5 | 480 × 800 | 187 | 2.56 |
| Palm Pre | 3.1 | 480 × 320 | 186 | 2.5 |
| Sony Xperia Z | 5 | 1920 × 1080 | 443 | 2.43 |
| Samsung Galaxy SIII | 4.8 | 720 × 1280 | 306 | 2.35 |
| LG Nexus 4 E960 | 4.7 | 768 × 1280 | 318 | 2.41 |
| Nokia Lumia 920 | 4.5 | 1280 × 768 | 332 | 2.31 |
| HTC One | 4.7 | 1080 × 1920 | 469 | 2.30 |
| HTC One X | 4.7 | 720 × 1280 | 312 | 2.30 |
| HTC Desire HD | 4.3 | 480 × 800 | 217 | 2.21 |
| BlackBerry Q10 | 3.1 | 720 × 720 | 328 | 2.19 |
| BlackBerry Z10 | 4.2 | 768 × 1280 | 355 | 2.16 |
| Motorola Droid X | 4.3 | 854 × 480 | 228 | 2.10 |
| Sony Ericsson S | 4.3 | 720 × 1280 | 342 | 2.10 |
| Motorola RAZR i XT890 | 4.3 | 540 × 960 | 256 | 2.10 |
| iPhone 5 | 4 | 640 × 1136 | 326 | 1.96 |
| Apple iPod Touch | 3.5 | 960 × 640 | 326 | 1.96 |
| Nokia Lumia 620 | 3.8 | 480 × 800 | 246 | 1.95 |
| HTC Wildfire | 3.2 | 240 × 320 | 125 | 1.92 |
| Nokia Lumia 710 | 3.7 | 800 × 480 | 252 | 1.90 |
| Motorola Defy | 3.7 | 854 × 480 | 265 | 1.81 |
| LG Optimus One | 3.2 | 320 × 480 | 180 | 1.77 |
| Nokia N96 | 2.8 | 240 × 320 | 143 | 1.67 |
| Sony Ericsson W810i | 1.9 | 176 × 220 | 148 | 1.18 |
中等尺寸的设备
| 设备名称 | 屏幕尺寸 (inches) | 分辨率 | PPI | PSINET 得分 |
|---|---|---|---|---|
| Apple iPad (1 & 2) | 9.7 | 1024 × 768 | 132 | 5.81 |
| Apple iPad (3rd Gen) | 9.7 | 2048 × 1536 | 264 | 5.81 |
| Amazon Kindle DX | 9.7 | 824 × 1200 | 150 | 5.49 |
| Acer Iconia Tab A500 | 10.1 | 800 × 1280 | 149 | 5.36 |
| Samsung Galaxy Tab | 10.1 | 1280 × 800 | 149 | 5.36 |
| Motorola Xoom | 10.1 | 1280 × 800 | 149 | 5.36 |
| Asus Transformer Pad Infinity | 10.1 | 1920 × 1200 | 224 | 5.35 |
| Microsoft Surface | 10.1 | 1366 × 768 | 148 | 5.18 |
| Asus VivoTab RT TF600T | 10.1 | 1366 × 768 | 155 | 4.95 |
| iPad Mini | 7.9 | 768 × 1024 | 162 | 4.74 |
| Amazon Kindle Fire HD | 8.9 | 1920 × 1200 | 254 | 4.72 |
确定设备大小就这么简单？那倒不是，这就是之所以称为定理的原因。它基于可靠的推论及经验论证，并且经由科学方法总结得出的。但它并不代表权威，只是通过抓取一小撮盐（也可以是一大堆NaCl）并进行了提炼而已。在resolution media query以及与之相关的工作成为Web重点的未来时代，这个定理将会发挥有价值的一面。
在实际中的应用
除了上述很直观的方式，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- 300px", function() {
alert('My, what a small screen you have there, Grandma!')
});
结合media query和CSS，并且使用能够识别分辨率的javascript库，就足以赋予我们掌握未来“物理网络”的能力。想像一下，这样我们就能看到跨越半个地球的博物馆里矗立着的雕塑以1：1的比率显示在任何设备上，或者在网上选购订婚戒指时，精确地看到24克拉的钻戒到底有多大。在实际生活中的应用不胜枚举。
我的注解：
- 设备的尺寸和分辨率层出不穷，响应式设计很难全部覆盖！
- Enquire.js是个好工具，特别是对于我们公司Google Analysis的分析需求——Google Analysis要求分辨出是点击的desktop页面还是mobile设备的页面，以便追踪分析，对我很有启发，不过反过来一想，其实任何一段辨别手持设备的js代码也可以代替Enquire.js!
refer：