基于物理尺寸的响应式设计(转)
两种Queries之间的细微区别
比较如下两个media-query声明:
|
@media (min-resolution: 341 dpi) and ( min-width : 767px ) > { }
|
与
|
@media (max-resolution: 131 dpi) 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
转载于:https://www.cnblogs.com/JoannaQ/p/3141506.html
基于物理尺寸的响应式设计(转)相关推荐
- Material Design复杂响应式设计
2011年,Gmail邮箱的按钮变得更加扁平化.2012年,Google引入分层的卡片设计,使用更多的空白和精心设计的层次排版结构.经历了几年的迭代和提炼,Google寻找到了一种可以贯通的理论体系, ...
- 响应式设计的真正挑战:RSS
本文讲的是响应式设计的真正挑战:RSS, web 世界丰富多彩,去看看服务器日志吧.那里充斥着爬虫机器人以及运行着各种操作系统,有着各种屏幕尺寸的移动设备和用户代理.你很容易会因为自己使用 web 的 ...
- flex如何做响应式设计_响应式设计-您做错了!
flex如何做响应式设计 Responsive design is not just about the web that automatically adjusts to different scr ...
- javafx响应式布局_JavaFX的响应式设计
javafx响应式布局 使用CSS技术,为您的网站创建响应式设计相对容易. 根据屏幕的大小,您可以使用其他CSS文件和布局. 在JavaFX中,乍一看似乎有些困难,因为CSS仅负责样式,而不负责布局. ...
- JavaFX的响应式设计
使用CSS技术,为您的网站创建响应式设计相对容易. 根据屏幕的大小,您可以使用其他CSS文件和布局. 在JavaFX中,乍一看这似乎有点困难,因为CSS仅负责样式,而不负责布局. 但是,为各个屏幕尺寸 ...
- 14个支持响应式设计的流行前端开发框架
在几年前,并没有真正意义上的前端开发.随着网络技术的发展,网站和 Web 应用程序变得越来越复杂,前端部分的工作独立出来逐渐成为现在的前端开发.如今,我们可以看到越来越多的公司在招聘前端开发岗位. 前 ...
- CSS框架+响应式设计
简介: Pure是来自雅虎的CSS框架,使用Normalize.CSS无需任何JavaScript代码.框架基于响应式设计,提供多种样式的组件,包括表格.表单.按钮.表.导航等.标识使用非常简单,整个 ...
- 复杂产品的响应式设计【流程篇】
都说2013年将是响应式设计爆发的一年.一淘设计团队在去年一淘首页改版时初步尝试了响应式,最近在一淘"玩客"项目中有了更加深入地应用,第一次在复杂产品中实现了全站响应式.中间积累了 ...
- 使用 jQuery Mobile 和 CSS3 实现响应式设计
来自:http://www.open-open.com/lib/view/open1338083235214.html jQuery Mobile 框架是一个 JavaScript 库,您可以用它来轻 ...
最新文章
- 内存数据库服务运营之路
- strcpy与面试官
- 【Flutter】Flutter 混合开发 ( Flutter 与 Native 通信 | 在 Flutter 端实现 EventChannel 通信 )
- 在实际使用中 mysql所支持的触发器有_计算机二级考试MySQL数据库每日一练 12月26日...
- 跨站脚本攻击(selfxss)笔记(三)
- OSS.Common获取枚举字典列表标准库支持
- Android项目开发填坑记-Fragment的onAttach
- mysql 导入unl文件_Informix和Oracel数据库导入UNL数据
- mysql存储过程实验几轮_想问下数据库中有关存储过程的实验,求大神!
- 高德地图画带箭头的线_模具装配图画成这样,那才真的叫标准!
- [Android Pro] Test win
- SPI机制入门、SPI机制原理
- 我们应当怎样做需求分析
- imx8mm偶现启动内核失败问题分析报告
- 最有效的Safari的广告拦截插件
- java thrift 教程_RPC学习----Thrift快速入门和Java简单示例
- 【MUI框架】学习笔记整理 Day 2
- 内网渗透学习04——域内横向移动
- java权限控制是什么_Java访问权限控制的重要性深入讲解
- 阿里云各种API如何使用
热门文章
- linux执行cli文件,linux – 如何“撤消”在终端/ CLI中执行的“解压缩”?
- 语义分割--Learning Object Interactions and Descriptions for Semantic Image Segmentation
- jquery 使用小技巧
- Linux查看可执行文件的各个段:.BSS,.TEXT,.DATA的大小
- Linux系统16进制形式查看二进制文件
- 汕头金山中学2021高考成绩查询,2019汕头市金山中学录取分数线及2019高考成绩喜报...
- php设置背景图片的代码,css设置背景图片如何实现?(代码实例)
- php邮箱文件发送源码,php简单实现发送带附件的邮件
- idea 快速导入实现父类方法_教你快速吸引精准粉丝实现流量变现的方法
- 太酷炫了,我用 Python 画出了北上广深的地铁路线动态图