基于物理尺寸的响应式设计 已翻译 100%

TAT_johnny 投递于 2013/04/10 15:28 (共 8 段, 翻译完成于 04-19)
阅读 4943
收藏 84
8
加载中

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

Mobile devices
尽管设备的物理特征全然不同,但却可以拥有相似的屏幕分辨率。iPad(1代)屏幕尺寸9.7″,分辨率1024 × 768 ,像素132 ppi。Kindle Keyboard 3G屏幕尺寸6″,分辨率768 × 1024,像素212ppi。图片来源:kodomut.

这就是大家熟知的“resolution media query”,尽管它作为media queries的规范已经有相当一段时间了,但这并不意味着所有人都会守规矩。不过还好,WebKit走在了前面,并极力推动它付诸实践。那么,我们到底该怎样充分利用这个好东东呢?请看下文分解。

( Smashing’s 提醒: 我们正在组织一个 全天研讨会,邀请了一批业内最受欢迎的web设计专家——举办场所位于我们的总部所在地德国弗莱堡(Freiburg)。座位有限,请 立即抢购门票)


hy86
hy86
翻译于 2013/04/14 01:49
2

两种Queries之间的细微区别

首先,我假定resolution-only media query是唯一办法。请看下面代码:

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

这行代码只是将低分辨率图片替换为高分辨率的,仅此而已。除此之外,我想不出其他好处。作为web设计师,其实我们并不关心分辨率。既然我们的设计要考虑人性化,当然得对人们阅读内容的边框进行仔细斟酌。最好有 width:1in 这样的单位,这样我们就不用考虑各种设备的尺寸。可惜的是,当今的社会是数字化的社会,物理尺寸和数字化的像素并不一致,做为设计师,我们得找到用来填补两者之间的鸿沟的东西,那就是resolution media query

hy86
hy86
翻译于 2013/04/14 23:55
2

好了,现在我给你看下,一小行代码竟能产生如此不同,一定会让你惊奇不已 (当然我也不敢保证你读完此文一定会有所收获)

比较如下两个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,可以将大小不同的设备区分开来。

hy86
hy86
翻译于 2013/04/15 00:11
2

目前看来,@media (min-width: 767px){ }对HTC和iPad而言没有什么区别,因为他们的宽度都是768像素,但是iPad的分辨率比较低(1024*768),而HTC的分辨率比较高(1280*768),最不可思议的是,iPad有10英尺宽,而HTC只有4.3英尺,不到前者的一半大小。

通过Resolution Media Query 和 Width Query 的配合使用,我们能够将具有同样宽度的不同大小的设备区分开,从而来相应的调整设计中的元素布局。前面说过的,我们对屏幕的分辨率并不关心,因为我们在响应式设计中使用断点, 这样可以大致判断一个网站的内容是显示在一个尺寸大的还是小的物理设备上—从而使用合适的字体或者自动调整元素布局。但我们到底该如何准确区分大小设备呢?不好意思,做不到。因为我们必须从每个项目的实际出发,这个设备在这个项目中是小设备,但在另外一个项目中,可能被归类为大设备。不过我按照一个范围,做了一些计算并设计了一个定理,这个定理多少会让你对大小设备的区分有所认识。

hy86
hy86
翻译于 2013/04/16 00:38
2

物理尺寸调查简单定理(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重点的未来时代,这个定理将会发挥有价值的一面。

hy86
hy86
翻译于 2013/04/18 00:49
2

打破定理

就像所有崇尚科学方法的人,我也试图打破自己创立的定理。于是,我想出了一个奇怪的设备,它有2英寸长,20英寸宽,这样的设备屏幕有20.09英寸,240 × 40像素,显示的分辨率仅为11.94PPI。尽管它有几乎半米长,但PSINET分数为2.01,很显然应该划分到小型设备的类别。原因很简单:2英寸的宽度而已,因为PSINET得分忽略掉了设备长度和宽度中较大的那个数值,所以这两者的尺寸差距越大,PSINET得分的可靠性就越低。当然,这种怪胎级的设备是不可能存在的,但它证明了此定理可以被打破。

hy86
hy86
翻译于 2013/04/19 00:05
1
设备名称 屏幕尺寸 (inches) 分辨率 PPI PSINET 得分
ThinLong 20.09 24 × 240 11.94 2.01


在实际中的应用

除了上述很直观的方式,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克拉的钻戒到底有多大。在实际生活中的应用不胜枚举。

hy86
hy86
翻译于 2013/04/19 00:43
1

从响应式web设计角度来考虑,不管用户使用的是什么设备,我们当然热衷于提供最佳的用户体验。与上述的media query相比,这种方式没什么挑战但多了一丝折腾。相互指责毫无意义,因为我们谁也改变不了当前的设备生态系统。制造商继续推出基于分辨率和像素密度的设备,这很好,因为这是他们的商业行为。作为身在高处的浏览器厂商应该提供给我们设计人员所需的工具以便尽可能地创造最佳用户体验,并且这本身就是他们的职责所在,同时我向那些通过WebKit引领resolution media query实现的好人们表示深深的敬意。

hy86
hy86
翻译于 2013/04/19 01:28
1
本文中的所有译文仅用于学习和交流目的,转载请务必注明文章译者、出处、和本文链接。
我们的翻译工作遵照 CC 协议,如果我们的工作有侵犯到您的权益,请及时联系我们。
加载中

评论(12)

JoannaQ
JoannaQ
设备的尺寸和分辨率层出不穷,响应式设计很难全部覆盖!
Enquire.js是个好工具,特别是对于我们公司Google Analysis的分析需求—需要分辨出是点击的desktop页面还是mobile设备的页面,对我很有启发,不过反过来一想,其实任何一段辨别手持设备的js也可以代替Enquire.js!
^_^
hy86
hy86

引用来自“Amazon”的评论

看的半懂。。

呵呵,不好意思,如果是翻译原因,我会努力以后翻译得更好
喻恒春
喻恒春
哈,还真有人想到物理尺寸这个问题了
按照现在技术的发展来看,web设计使用物理尺寸是个很好的设计,图片啥的不用担心,那不能成为问题。俺已经在做了,现在只是个小样。如果不是看到这篇文字,我都不好意思发出来
一个基于 HTML5、CSS3 的前端框架
https://github.com/achun/jingyes
郑柯
郑柯
啥啊,不就起响应式布局?搞得那么复杂。
帖子列表
帖子列表
太专业了
jQer
jQer
感觉有点舍本逐末啊, 为了每一件物理设备花费巨大的时间设定响应尺寸
Dr.Neo
Dr.Neo
感觉写的很好 这个定律可以算是比较通用的.
水牛叔叔
水牛叔叔
分辨率表有用
打杂程序猿
打杂程序猿
看了一下,就是android 的dp 思想..
Hanks
Hanks
前两天看英文的了,没想到各位神翻译过来了,万分敬意!
返回顶部
顶部