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

响应式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,进行前端技术交流。

submit()-JQuery API toggle(even,odd)-JQuery API trigger(type)-JQuery API unbind(type,fn)-JQuery API unload(fn)-JQuery API Effects特效-JQuery API animate-JQuery API fadeIn(speed, callback)-JQuery API fadeOut(speed,callback)-JQuery API fadeTo(speed,opacity,callback)-JQuery API hide(speed,callback)-JQuery API hide()-JQuery API show(speed,callback)-JQuery API show()-JQuery API slideDown(speed,callback)-JQuery API slideToggle(speed,callback)-JQuery API slideUp(speed, callback)-JQuery API toggle()-JQuery API Javascript-JQuery API $.browser-JQuery API $.each(obj, fn)-JQuery API $.extend(target,prop1,propN)-JQuery API $.grep(array,fn,inv)-JQuery API $.map(array, fn)-JQuery API $.merge(first,second)-JQuery API $.trim(str)-JQuery API Ajax-JQuery API $.ajax(properties)-JQuery API $.ajaxSetup(settings)-JQuery API $.ajaxTimeout(time)-JQuery API $.get(url, params, callback)-JQuery API 问个简单的问题,如何利用子程序改变公共变量数组的值 如何在主页将数据库中内容实现动态公告? 我要买JDBC for SQL Server7.0的jar驱动,谢谢! 求《c++大学教程(第二版)》下载 如何取一个页所有控件的ID值啊! 我的WSAD 5.0的新建“数据库Web页面”,为什么“下一步”和“完成”都不能按?(详情请进!)请帮帮我! 机器被入侵,help 非常简单关于TreeView Control。的问题。喜欢大家帮忙, 求助 一个说易也不易的问题 cookie 只能已天为单位 来过期么? :( 30分钟就国旗 用什么? 请教高手 有些IE不能瀏覽flash文件﹐請問在哪有下載? 求购时间控件,用去web开发 如何才能按照分类显示视图的内容呢? 同志们 再见 接分! 再发一次,ie版本问题怎么解决,100分 请教:在Rational rose中如何去设计数据库表? 为什么wndows2k pro一访问windows2k server就有"打印机"和"任务计划"的共享,可不可以消除? win2k server下,iis5.0有问题,我想卸载,再重新安装,怎么做? treeview的使用小结(一) INDY 资料! 请分析这段代码,谢谢 怎样获得DataGrid的DataSource? 有关struts的问题,返回页面结果不对!在线等待,以解决就结帖 怎么改变快捷菜单PopupMenu1的颜色? 用OWC组件做柱状图,需要显示不同颜色的柱状以及显示不同颜色的图例 VS.NET中如何让自定义的事件出现在属性编辑器中? javascript 中有没有能返回指定某年某月中总天数的函数 如何将主窗体中的变量传到报表中,以供dataset查询用,急急急!!! 新手探路 不知道这是不是一个bug 函数返回值类型问题 兄弟我现在改行搞传统的邮政商业信函业务!给点建议!来者有分! 装有isa客户端的机器不能用FlashGet或者蚂蚁下载 网路多少钱才要交税? Kingofark关于英语及外语学习的50个观点 adotable定位记录有哪些方法?如何使用? 超高难度求sql语句,非高手莫进,在线等.......... petshop有些代碼不明白。。。。。。。。。。。 哎,运算符重载把我卡住了!求救!!! 最后 请问函数传递,设置默认值问题! 通过ODBC连接INFORMIX的问题!急!急!急! 有没有VC高手想在上海找工作? 求一个发送邮件的例子(急!!) 有谁碰到过多人同时改写几十个xml文件从而导致xml文件混乱的情况? 我在datawindow中设置initial vlaue=0,为什么写到数据库里的值还是null 请问联众和中游客户端的聊天大厅是基于chtmlview还是crichedit编程的? WINDOWS高级用户或技术支持人员请进! 通过ODBC连接INFORMIX的问题!急!急!急! 长翅红眼(VVSS)果蝇与残翅墨眼(vvss)果蝇杂交,F1全是长翅红眼果蝇.有5个具有上述两性状的品种,分别与F1交配,依次得到如下结果:①长红∶长墨∶残红∶残墨=9∶3∶3∶1;②长红∶长墨∶残红 天天酷跑萝莉配白虎怎么样 TELL ME MORE有人用过吗? tell me more 软件 tell me more需要在网络环境下使用吗? 历史上谁做皇帝时间最长? 宾格是什么? tell me more 使用安装tell me more 以后,进入程序时总出现Impossible to access the lessons.Put the TELL ME MORE material into the intended location(DVD-ROM drive or USB 使用这个软件还需要课程么? 我的宾格是什么 我的宾格是什么啊急 我的马苏里拉奶酪不能拉丝了.呜呜今天自己做了pizza,还买了马苏里拉奶酪.但是却拉不出丝来~奶酪我也放了挺多.盘子大小的pizza我放了2片奶酪.奶酪也已经化了呢,但是就是没有拉丝的效果.是 美到令人窒息!日本人气观光地精选 第特稿:逐梦海外 情系祖国——改革开放朝鲜海军军官执行任务时殉职 金正恩前德媒:德美将达成互不监听协议 拟明年温州一电镀工业园内16家企业 350F1年度世界冠军塞巴斯蒂安座驾亮相沈德媒:德美将达成互不监听协议 拟明年“中国梦”拥有世界舞台德媒:德美将达成互不监听协议 拟明年奇数为男偶数是女?2013年是“男性不堪昂贵房租 伦敦上班族住巴塞罗那坐养老保险能退款 再由单位补缴吗刘老师说当年帮学生创业 是自己的责任微笑天使请大家 为文明南岸点赞恭喜!1555个家庭有了新房子长白山鲜人参,秋冬进补正当时69.99万元买宝马X5、X6石笋山的前世今生把学生足球特长 纳入综合素质评价找回贵重失物,谢谢司机分析: 严重的会恶心头痛城镇有线电视主机每月收费25元
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘