基于物理尺寸的响应式设计(转)

两种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-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的得分，将它们列表如下：

较大的设备

设备名称	屏幕尺寸 (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-width: 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：

• 基于物理尺寸的响应式设计
  
• Responsive Web Design With Physical Units