说三道四技术文摘-感悟人生的经典句子
说三道四 > 文档快照

响应式Web开发,必懂媒体查询(系统理论+实战教程)

HTML文档下载 WORD文档下载 PDF文档下载
移动开发正风靡全球,《移动Web手册》一书总结了移动Web开发核心要点,适合广大前端开发工程师阅读。本文节选至该书,重点讲解响应式Web开发重要技术——“媒体查询”。

【编者按】《移动Web手册(双色)》主要讲解了移动Web开发核心要点,及与传统PC网站开发的不同之处。适合前端开发工程师,对移动Web开发感兴趣的手机App开发工程师以及测试工程师阅读学习 。下面节选了该书中关于“媒体查询”的精彩内容。

媒体查询

(本文)将系统地学习媒体查询。媒体查询其实就是CSS的if语句。如果宽度为800px或更宽,如果是横屏,如果分辨率是1.5dppx或更小:使用这些CSS声明。

媒体查询有以下三种类型。

  1. 媒介类型查询:这是什么类型的设备。
  2. 视口相关的媒体查询——这一部分的核心。
  3.  特性相关媒体查询:浏览器是否支持特性X?

这一部分讨论的媒体查询只对整个页面起作用。但是,对元素使用媒体查询的想法浮出了水面。它们会根据特定元素而不是整个页面的宽度或高度做出反应。这对Twitter或Facebook的组件等会有很大帮助。虽然在写这本书的时候,元素媒体查询还没有被支持,甚至在语法和作用域上还没有达成一致,但这是一个很好的想法,我希望它们最终会被实现。

我们将不会讲最后一种类型。虽然有些内容可能对移动Web开发者有帮助,但目前被支持的功能是最没用的,并且这些功能跟视口没有任何关系。

媒体类型

原本的想法是,媒体类型可以让你区分不同类型的设备。不幸的是,这个想法失败了;唯一真正有用的媒体类型是print,其他类型从未被正确地实现。例如,TV浏览器应该支持tv类型但是它们没有。类似的,移动设备应该响应媒体类型handheld,但是它们也没有支持。它们不这样做的原因是有益的。

在过去糟糕的日子中,在移动端浏览器最多只可以处理WAP和HTML的子集XHTML-MP时,它们大都遵循了标准并支持handheld。Web开发者迫切地为这些浏览器提供了更简单的样式和脚本,因为它们毕竟对标准支持得不完整。

如今到来的移动端浏览器,如Opera、Safari和BlackBerry,它们知道Web开发者是如何使用handheld类型的。由于它们正确地支持了HTML、CSS和JavaScript,所以它们希望获得全部样式和脚本。最直接的方法就是不要支持这个媒体查询,所以它们这么做了。因此,现代移动端浏览器的标志就是不再支持handheld。TV浏览器厂商也做了一个类似的选择。

又是一次一样的竞争:Web开发者希望区分能力弱和能力强的浏览器;然后出现了新的浏览器版本,并处于能力弱的分类,为了避开开发者的探测,它们开始伪造自己的身份。当我们认为只有Netscape和IE可以的时候,小型浏览器也可以;移动端浏览器现在这么做,并且毫无疑问其他更多浏览器也会走这条道路。

所以不要因为媒体类型操心了,除了print。print样式表非常实用但没被充分应用。虽然它们超出了本书的范围,但是我强烈推荐你们在项目中使用它。

语法笔记

这是一个媒体查询。样式只有在布局视口的宽度小于或等于400px的时候才会起作用。

@media all and (max-width: 400) {div.sidebar {// 这些给div.sidebar定义的样式在宽度小于或等于400px时才会生效}}

这里有很多重要的知识点。首先,所有媒体查询都需要一个媒体类型,通常使用all是最好的。

第二点,你应该在你的媒体查询中总是使用min-或max-前缀。通常情况下,你不关心一个准确的值,而是关心一个范围。上面的例子只要在布局视口的宽度小于或等于400px的时候就会工作,下面我们看到的例子只有在分辨率小于或等于1.5的时候才会工作。

最后,虽然没有定义正式的单位,但媒体查询的单位是像素。你也可以使用CSS的其他长度单位,如em或cm,不过你需要显式地定义它们。只有百分比不是很有用,说句实话我甚至不确定它们是否已经被支持了。(另外,是什么的百分比呢?)

你可以尽情地使用媒体查询。and是逻辑运算符and,逗号是逻辑运算符or。下面来看一个更复杂的例子。下一个媒体查询会在布局视口宽度小于或等于400px,屏幕方向为竖直,分辨率小于或等于1.5的时候起作用。因为浏览器兼容性问题,最后一个条件需要两个媒体查询,并且它们被一个逗号分隔。(设备像素比小于或等于1.5,或分辨率小于或等于144dpi)。

@media all and (max-width: 400) and (orientation: portrait)and ((max-resolution: 144dpi),(-webkit-max-device-pixel-ratio: 1.5)) {/* 只有在布局视口不超过400px、设备处于竖屏模式,并且devicePixelRatio小于等于1.5时才会生效 */}

宽度和高度

到目前为止,你将使用的最重要的媒体查询是width。在必须使一些东西显示在首屏的使用场景中才会使用到height。width和height的媒体查询设置了当前布局视口的宽和高,并且在所有浏览器中都能工作。使用完美meta视口标签,你可以放心地抛开布局视口的宽度,它现在与理想视口的尺寸相同。这是响应式设计的核心。

@media all and (max-width: 400) {div.sidebar {// 在这里为div.sidebar定义的样式在布局视口宽度不超过400px时生效}}

height的使用没那么简单,因为它会算上浏览器的工具栏,并且这个工具栏会在用户滚动的时候进入或离开可见区域。尽情地使用它吧,不过给浏览器一些决定高度的余地。

在媒体查询中使用em

媒体查询中的em单位值得我们注意。在写这本书的时候它非常流行,虽然它没有犯任何错误,不过在我心中它是被高估了。并且它们没有天生比像素优秀,除了一个特定的使用场景。

在CSS中,1em等于一个字体的大小;对于一个14px的字体,1em将等于14px宽。术语font size通常是指你的CSS给元素设置的字体大小,但在媒体查询中它指的是文档根元素的字体大小。就是html元素的字体大小。毕竟媒体查询是对整个页面起作用的,而不是对某一个特定元素。

html元素的默认字体大小是16px,所以1em默认为16px宽。当然,你可以改变根元素的字体大小:如果你把它设为12px,那么1em就是12px宽;如果你把它设为20px,那么1em就是20px宽,依此类推。

在移动端,根元素的字体大小在你缩放的时候是不会变的。缩放是放大CSS像素的过程,这个过程跟字体大小没有任何关系,所以不管用户缩放了多少,1em的宽度还是同样多的CSS像素。因此,在移动端,em并不比像素优秀。

在桌面上会比较复杂。我们在前面说到的页面缩放在放大CSS像素尺寸的同时不会改变字体大小,所以同样的,在这种场景下em也不比像素有优势。但是,Firefox和Safari仍然支持文字大小缩放,这种方式的缩放只使文字大小改变。这是em比像素优秀的一个真实使用场景。另外一个使用场景是用户在他们的浏览器偏好设置中设置了一个不同的,更大的字体。在这种情况下,em也比像素提供了更好的阅读体验。不幸的是,我没发现多少人会这么做,不管是在手机还是桌面上。

换句话说,em只有在你的网站的根元素字体大小有可能改变并且你希望布局根据这个变化改变的时候比像素优秀。如果你的网站是这样的情况,那么可使用em。在所有其他场景中,使用em还是像素无关紧要。em仍然能正常工作,并且有时候使用em比使用像素表述布局更符合逻辑,但是它们没有比像素优秀很多。

device-width和device-height

你应该避免使用device-width和device-height,因为它们在所有浏览器上总是使用screen.width和screen.height。就像我们将要提到的,这些JavaScript属性既可能给出的是理想视口的尺寸,也可能给出设备像素的数量。因此,你无法预知获得的信息是否正确。这使得使用device-width和deviceheight非常危险。

device-pixel-ratio和分辨率

我们已经讨论了分辨率,它是理想视口与屏幕物理像素尺寸的比。因此分辨率的媒体查询对任何与设备物理尺寸有关的问题都没有帮助,虽说它们可以帮助你决定在用户使用类似视网膜屏幕的时候是否使用高分辨率图片。

这里有浏览器兼容性问题:基于WebKit的浏览器需要使用-webkitdevice-pixel-ratio,而所有其他浏览器需要使用分辨率。虽说长远看来分辨率会取胜,但目前你仍然需要-webkit-device-pixel-ratio。

在2013的秋天,我通过我的读者们进行了一个关于视口的调查,我提出的一个问题是,他们在媒体查询中会检查哪个分辨率。一半以上的人回复他们会检查device pixel ratio 1.5这个值。所以这似乎是一种新兴的业界标准。你可以在http://smashed.by/mwhb7看到调查结果。

有一个附加的技巧:单位。-webkit-device-pixel-ratio不需要单位,它只是一个跟window.devicePixelRatio对应的整数。另一方面,分辨率接受dpi和dppx两个单位。我们已经讨论过:1dppx等同于设备像素比为1,同时96dpi等同于1dppx。所有浏览器都支持dpi,但没有都支持dppx,所以最好使用dpi。这里有一个跨浏览器的解决方案:

@media all and ((-webkit-min-device-pixel-ratio: 1.5),(min-resolution: 144dpi)) {// 定义设备像素比大于等于1.5时的样式}

如果你想要知道分辨率是否大于或等于1.5,请再一次使用min-前缀。

转向

来看一个简单的情况:转向。这个媒体查询是用来探测当前设备的转向的,它能识别出设备目前是处于横屏还是竖屏模式。所有浏览器都支持它。无前缀,无复杂内容,所以尽管使用吧。

aspect-ratio和device-aspect-ratio

aspect-ratio和device-aspect-radio分别提供了布局视口的宽高比和screen.width/height的值。这个比例是用一个分数表示的,例如,3/4或16/9。注意,现在或未来的浏览器工具栏可能会改变布局视口的比例。


本文摘自《移动Web手册(双色)》,电子工业出版社出版。

本书主要讲解了移动Web开发和传统PC网站开发的不同之处。作者首先对移动互联网相关的运营商、设备、操作系统和软件进行了简单的介绍,让读者理解移动开发的复杂之处。接下来对移动设备上的各种浏览器进行了详细介绍,以及这些浏览器的市场占有率、特性支持等。主要面向前端开发工程师,对移动Web开发感兴趣的手机App开发工程师以及测试工程师也可以参考学习。

欢迎加入CSDN前端交流群:218126086,进行前端技术交流。

前端开发框架三剑客—AngularJS VS. Backone.js VS.Ember.js 【CTO俱乐部读书会】《流程的永恒之道》辛鹏:企业的本质就是流程运营 紧扣微信研发痛点 2014微信开发者大会吸引大量外地参会者 Mobile First!jQuery UI组件集Wijmo五年最大更新 首届TCL杯HTML5智能电视—应用开发大赛火热开启! MDCC智能硬件征集关键词:智能家居、机器人、健康生活 采集颜色、自动同步,还有比这更牛叉的儿童触控笔么? AppCan移动平台:为企业移动化进程加速 学生强则国强,访天猫推荐算法大赛Top 9团队 Mozilla与三星之子——Servo特性解读 360天巡启动公测 打造新一代企业级无线安全解决方案 继Storm和Spark之后,Hortonworks添加对Kafka的支持 一周消息树:国产操作系统最快10月发布,并支持应用商店 技术团队看板方法实践的难点分析 SAP云服务加速转型:调动资源瞄准中国市场 开发测试全承包!移动应用开发工具Telerik平台 火火火火火!看HomeKit如何改变物联网和智能家居? MDCC应用与工具关键词:平台、社交、垂直、解决方案 Leap Motion正式入华 将发布第二代软件SDK 120万操作/秒Redis Cloud 集群单一服务器非基准测试程序 2014微信开发者大会顺利结束 TOP10优秀微信开发商名单公布 【最佳实践】通过DevOps确保可靠和有效的信息安全 2048 Hello World:跨平台快速应用开发Python框架Kivy Forrester:关于私有云的10个事实 2014年8月操作系统份额:Win 8.x大涨,Linux继续下跌 0代码、不编程—交互式网页设计工具VXPLO 揭秘Instagram Hyperlapse背后的技术 【CTO俱乐部在线教育研讨会】用互联网技术深入创新教育产品 降低门槛!Hybrid应用开发框架LigerMobile 下一代IT革命:微服务器和雾计算 使用Mongo Connector和Elasticsearch实现模糊匹配 C语言调试中的错误 在WIN98中怎样写代码通过注册表判断MODEM在哪个端口? 简单问题:在WIN98中怎样写代码通过注册表判断MODEM在哪个端口? 如何在执行时返回query中的一个查询之值 能否提供50元邮购上半年《程序员》的业务? 给定一个email地址及DNS服务器地址,如何检测此email地址对应的SMTP服务器?(请ludou,funtek等进来领分) 如何在mfc下编译一个c源文件 高手请帮忙解决这个难题-关于.vox文件 请问!想去上海的外企,英语水平要多高才可以?口语重要吗? 在sybase中如何建表的时候把中文注释加入?以便在建数据窗口的时候label显示中文。 请问win2000_Server的service pack在哪有卖,D版?北京? 安装JBuilder5对机器有什么性能要求吗(内存、cpu...)?Thanks!(内空) 关于PB作为OLE SERVER的问题 我想做个启动画面的窗口 关于MYSQL的问题 数据库高手请进,值得一看 怎么从文本文件里取出其内容? 请大家帮忙看一下,关于Delphi的三层MIS开发 如何获得经典的C++/MFC方面的电子文档,中英都行,谢谢! 压缩中提到的文件头有什么作用 , 请问各位专家,在网页上如何制作视频点播?有几种方式! 我报了中程谁有历年的中程试卷? 我收到的信都是?号,怎么看???? VB中是否有移位操作符??是否有_能够得到数据类型宽度的函数? 哪里有core java的e版down啊? 有事好商量!请进! DLL编程错误,请高手指教一下!! 活见鬼,真气人....... 问一个trigger问题? 问一下:我的char*都用_T("asdfsafd")表示了,资源也没任何问题,可有时候运行程序显示乱码 在论坛里,发一个帖子新开一个窗口,当发完后让原来那个窗口刷新一下 我的机子到底怎么回事???? 我试试.. CListCtrl中如何选定整个一行? 来到济南天气太热,特来送分 ★★★★★ 见于现在伪ID和盗用密码的现象十分嚣张,我提议…… ★★★★★ 请教各位,我用vb6.0访问ms sql7.0数据库,为什么有时出现,“过期,数据已超时?” 请问COM和DLL有什么区别和联系?(30分) 关于侯老师 win95-a-developers-guide 一书的源配书... ISAPI中不能存取ASP中的Session、Application变量?高手你老人家在哪里? 大家来看看这些招聘题目合不合适 提一个网页制作的问题哈,大家不要扔西红市啊,网叶制作可是程序员的基本技能之一 activeskin里的skinbuilder有谁用过???来讨论吧 我在msdn上看到vb中的字符串有两种:定长字符串和变长字符串。请问如何分别声明这两种类型? 怎样在ADO中引用已打开的recordset的某一字段值,请给几个例,谢谢了! seedundersnow and holyfire help me!about 8253! 谁有cute ftp 4.2.6 beta的注册码 请问如何把页面查询到的记录导入到Excel中呢? 有用过TAdvStringGrid的吗?OnGetEditorType( )为何不被调用? 请教高手如何用Xsl编制函数控制Xml??急急 哪位给一个MD5的例子!谢谢了 八加九等于几 一共有360千克的水果糖,每袋4分之一千克,5小时已经装完6分之5,平均每小时装多少袋? 6元=()元 6分=()元 3角5分=()元 10元1角=()元 计算:[3(x+b)^2-6(x+b)^2+9(x+b)]/[3(x+b)]-(x-b)^2; 简单运算1986-1983+1980-1977+.12-9+6-3 把六分之五千克的糖,平均分成五份,每份是五千克得几分之几,提出理解快急啊快~~~~~~~~~~~~~~~~~ x+1/x=0和x+1/x=13/6怎么算是X+(1/X)=0和x+(1/x)=13/6 小玲的房间地板面积是14平方米,如果选用边长0.3米得正方形地砖铺地,至少需要多少块这样的方砖 比六分之五千克多三分之一千克是多少千克,比六分之五千克多三分之一是多少千克? 1.2:X=0.6怎么算 小玲的房间地板面积是14平方米,如果选用边长0.3米的正方形地砖铺地,至少需要多少块这样的方砖?(得保留整数) 第一道:1000米的十分之七是( ) 第二道:120分的六分之五是( )分直接说得数就行 X+2分之X=6怎么算 一间房子长18米,宽15米,它的面积是多少平方米?用面积是9平方分米的正方形地砖铺地,需要多少块? 4分之三千克的六分之五是多少千克.八分之7米的七分之三是多少 米 计算,2/x(x+2)+2/(x+2)(x+4)+2/(x+4)(x+6) 一个会议室的长是15米,宽是6米.用面积是9平方分米的正方形瓷砖铺地,需要这样的瓷砖多少块? 18个六分之五是( );120米比( )米多25%. x除0.9=0.8怎么算 一个会议室的长15米,宽6 米.用面积是9平方分米的正方形瓷砖铺地,需要这样的瓷砖多少块? 1,2,3,4,5,6,7,8,9,10哪个是质数 0.26(5-X)=0.91怎么算 铺一间房间的地,用边长3dm的正方形地砖铺,正好1600块,如果改成用边长4dm的地砖铺,需要多少块? 三分之一,2,1,-6,0,9,7,3,-9,14,-1.4,二又五分之一【自然数,整数,质数,三分之一,2,1,-6,0,9,7,3,-9,14,-1.4, 二又五分之一【自然数,整数,质数,台数各分类.】 x+0.75-5/3=0.15怎么算 一种瓷砖长4dm,宽3dm,如果用这样的瓷砖铺一个正方形,正方形边长最小是多少分米?需要多少块这样的瓷砖?反正我是按作业来打的) 八分之九至少加上()个九分之一,和是最小的质数? 5*(x+1)=0.2怎么算? 一间房间,用边长2分米的地砖铺地,需要用144块,如果用边长为3分米的地砖铺地,需要多少块? 一根六分之五米长的钢绳重3千克,这种钢绳每米重多少千克?每千克钢绳有多长? (2.5-x)/x=0.4怎么算 房间的地面是正方形,无论选择边长50厘米的正方形地砖铺地,还是选择边长60厘米的方砖,都正好铺满,小明房间的地面至少是多少平方米 一根6分之5米长的钢绳重3分之2千克,这种钢绳每米重多少千克?每千克钢绳有多长? 2(x-0.5)=0.8怎么算 聪聪的房间面积为17.6平方米,房间地面恰好由110块相同的正方形地砖铺成,求每块地砖的边长是多少?用方程解答贺州市2013年春季学期段考7年级试卷 数学一元一次方程哦 一根六分之五米长的钢管重2千克,这种钢绳每米重多少千克,每千克钢绳有多长 3(x-0.5)-2(x-4.5)=7怎么算?要步骤 小亮的房间面积为17.6平方米 房间地面恰好由110块相同的正方形地砖铺成 每块地砖边长多长?房间面积是17.6 不是 地砖面积 一根6分之5米的钢绳重3分之2千克,这种钢绳每米重多少千克?每千克钢绳有多长? 计算 (x-0.5)^2(0.5+x)^2 小明房间的面积是10.8平方米,房间地面由120块相同的正方形地砖铺成,每块地砖的边长是多少?用方程! 一根5/6米长的钢绳重3千克,这种钢绳每米重多少千克?每千克钢绳有多长? 1/8比X=3/8比9/10 步骤明细些. 小明房间的面积为18平方米,房间地面由200块相同的正方形地砖铺成,每块地砖的边长是多少? 有一座建筑物,在地面上A点测得顶点C的仰角为30度,向建筑物前进50M 到B点,又测得C的仰角为45度,求建筑物的高度,精确到0.1米 计算(1-1/10)X(1-1/9)X(1-1/8)X……(1-1/2)的值是1/10还是1/20 小明的房间面积为10.8平方米,房间店面恰有120块正方形地砖铺成每块边长几米? 二元依次解数学题王大伯承包了25亩土地,今年春季改种茄子和西红柿两种大棚蔬菜,共用去成本44000元.其中种茄子每亩成本为1700元,获纯利2400元,种西红柿每亩成本为1800元,获纯利2600元,王大伯 计算:(-1.8*10^-10)/(9*10^8) 9.07千米等于()千米()米?17/4时=()时()分?2.38升=()升()毫升 某市出租车收费标准为:3千米及3千米内收费6元;3千米以上每1千米收2元.现在贝贝有28元钱,他想乘出租车去离家18千米外的外婆家,钱够么?(写出计算过程) 十个八加九个九等于 请问2|9公里等于几千米? x-2xy=3是2元1次还是2元2次 请问8分之1加9 分之1等于多少如何计算出来 17公里等于多少米啊?谢谢! 6元3角5分=( )元=( )角=( )分 送钱了,8加9等于 把六分之五的糖,平均分成五份,每份是五千克得几分之几,提出理解 3角5分用分数是多少元?
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn