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

此文改题为“自我超越”更合适些。......实际上，最近几年，出现了一个问题：早在2013年初，也就是我正在写此文的时候，以物理设备为载体的web，我们还拿不出一套精准的设计方案，甚至在较长的时间内依然如此。但如果知道了设备的各项物理特性，问题就迎刃而解了——如果说目前做不到，但在不久的将来一定行。

成都创新互联公司专注于斗门网站建设服务及定制，我们拥有丰富的企业做网站经验。 热诚为您提供斗门营销型网站建设，斗门网站制作、斗门网页设计、斗门网站官网定制、微信小程序服务，打造斗门网络公司原创品牌,更为您提供斗门网站排名全网营销落地服务。

尽管设备的物理特征全然不同，但却可以拥有相似的屏幕分辨率。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.shufengxianlan.com/qtweb/news49/534499.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联