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

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

微软式微?AMD、英特尔等开始疏远Windows 语音技术现状:四千万突破语音产业的技术壁垒? 万维网联盟W3C推荐Web性能API 微软郑子颖:Windows Azure如何支持开源系统和软件? EMC 叶成辉:软件定义数据中心实现统一、开放的管理 百度云主任架构师 侯震宇:云终端开启数字生活 中国工程院院士 倪光南:中国云计算在全世界份额远超3% 信息图:未来的企业移动培训应用与技术 “2013年度中国优秀开源项目征集”活动最后三天 为什么开发者倾向于使用杂乱无章的免费工具 EMC合作伙伴销售经理杜术清:实现云的三种途径 开发者想走向海外:你融入老外的圈子了吗? 前微软工程师:美国监控和直接访问服务器?这不太可能 代码、TDD速查表 如何选择前端架构:服务器端HTML vs. JS部件 vs.单页Web应用 世界上最高深的Android特洛伊病毒 招聘iOS开发,老板必问的5个问题 护航科技吴伟湘:IT离线安全体检服务将带来颠覆 百度王继平:移动互联网时代云平台思路 “第八届开源中国开源世界高峰论坛”火热开启 微软发布SQL Server 2014预览版,展示内存数据库技术 帮助软件开发者提高效率的10个小窍门 我想做个程序员:Technovation Challenge圆女孩编程梦想 未来我们开发的Google Glass应用将会是什么样? 独家:前RIM大中华区总经理刘征宇,加入Appconomy 用一个API搞定一切 Segment.io为移动开发者提供便利的分析数据分发服务 TIOBE 6月编程语言排行榜:JavaScript回归前十 《Kingdom Rush Frontiers》上线后 迅速抢占27个国家游戏榜首 移动周报:85后程序员,iOS开源项目,细数7天大事件! Instagram:从Redis到Cassandra 成本节省1/4 乐元素CTO凌聪访谈:游戏引擎技术选型之王道 在局域网中,如何在代理服务上作手脚,使处同一局域网某些人可以上网,某些人不能上网。各位帮忙! 如何制作安装盘,我的做好了,为什么到别的机器上安装不能运行 急急急·高手帮忙,在Java中引用C++的动态链接库,中文字符串参数变成乱码,怎么办? 有前锁问题 找个扫雷源程序! 发送邮件时,对现在大部网站要求的smtp认证,如何处理?急用! 连接的ACESS数据库可以是EXCEL的链接表吗? 神呀救救我吧? 谁知道哪有Delphi写的代理服务器源代码? 关于MFC的动态生成对象的问题 有谁把平台转向XP了,不知在这种新环境下开发出的软件在别的机器上会不会有问题(包括运行库及打包) 帮帮我,好吗?(谢谢大家了) 千山、恶人、老鱼、念雪、浪人及各位大虾,小弟也遇到了Dll引出MDIChild的问题,但是在linux下,不能正常退出,请各位帮忙,多谢了。 我的浏览器怎么了?? 心情好到最高点!放分!!!!!!!!!! 大家一定要帮帮我~~~~~~~~~ 一个关于重载的问题! 不活了 不活了.... 在VC中讲Edit控件的属性设置为ReadOnly后,如何改变控件的背景色??? 深圳的户口政策以及用人单位对户口的态度是怎样的? 200分求购一个VB写的用mciSendCommand播放VCD或者AVI的例子!!!!!!!! 请问大家认为数学对程序员来说是一个怎样的地位................ 紧急,求救!!!!!!!!!!!!!!! 请问在GSM MODEM编程中,如何知道短信是否已发送到目的手机! 急:为什么都用uses包含了,还是报告说没定义变量? 删除表时遇到的问题 *************stringgrid的问题?????? 再问几个问题 如何查找csdn上网的朋友 用 ADO 对 Oracle blob 字段读写 (谁能解决送1000分) 请问oracle9i比oracle8i多了那些功能?这个产品是否成熟? VB读串口数据 请问,你们做项目一般用什么分析设计方法,生命周期法? 快速原型法? 面向对象分析设计法?? 请问如何用query删除一个记录???????????????????????? 请问那里可以下载到雷电(指点一下也给分)……………… 初级问题,关于硬盘文件格式转换,请多多帮忙,谢谢! 那里有比较好的软件公司 毕业设计选题 谁有读写注册表的原代码? 请问那位大哥有画切线的C语言算法 如何使页面上的按钮被点击后自动打印当前页面? 哪儿可以下载星际争霸? 注册表中如何建新的主键?30分 寻求在tc下设置640*480(256色)模式的代码 DELPHI 真的好难 哪里有支持ASP+access的免费空间?!!30分 SaveDialog该如何使用? 为什么csdn把大家的回复都发到我的邮箱里去了???!!!! 我在学WinSocket,请问现在外面WinSocket吃香吗?一般做什么东西要用WinSocket的?找的到工作吗?还有Qos,RAS是什么东西?有人学吗?好象和编程不搭架的? 我的显卡OpenGL在Win2000下用不起来,驱动是对的,显卡是Creative TNT2 ?SOS D盘没了! 读了这个故事,你有什么感悟老舍的生活一直不富裕,他曾说世界上“最伟大的一个字——‘饭’——给我时间与饭我能够写出较好的.”在抗战时的重庆尤甚,那时老舍特别关心好友吴组缃先生 直径是20厘米的圆中,画一个最大的正方形,正方形的面积是多少? 邯郸哪有卖塑料垃圾桶、玻璃钢垃圾桶、不锈钢垃圾桶、耐火垃圾桶的? 灯光可以代替太阳光吗一般的花草都喜欢阳光 放在室内的盆栽很少能见到阳光 那么灯光对它能起到光合作用吗 请问不锈钢的种类有哪些? 不锈钢垃圾桶 蚊子可以区别太阳光和灯光?蚊子都是白天休息,晚上出来的多.但好像和光线关系不大啊? 爱国主义电影观后感要真实!字多点! 合成氨脱硫造气的基本原理 从物理学角度阐述一下摄影的柔光灯的柔光和太阳光和灯光有什么区别? 爱国电影观后感《董存瑞》210字左右 合成氨工艺气的成分是什么 太阳光与灯光有什么具体的区别?请详细点.谢谢. 爱国主义电影读后感 合成氨中的造气工段的具体过程以及用到的设备 活性混合材料和非活性材料掺入到硅酸盐水泥中各起什么作用? 是作用!求解答呀 特别是活性材料的作用 爱国影片的观后感求2篇爱国电影观后感,字数350——450啊!注意字数啊! 潮州不锈钢多用桶价格多少?不锈钢多用桶质量怎么样?想了解潮州不锈钢多用桶的价格,请大家帮忙推荐产品质量有保证的不锈钢多用桶产品. 掺混合材水泥和 硅酸盐水泥在性能上 有何差异?并 请 说明原因.( 要 爱国主义影视片 观后感求一篇爱国主义教育题材的影视片观后感急 限两天时间 快 马上就要交了 计算不锈钢空心管的重量:管直径40mm,内部孔35mm,长230M,求该空心管的重量 水泥混合材料可使硅酸盐水泥的性质发生什么变化 一个直径是8分米的圆桌,要在上面铺一块比桌面直径大4分米的圆形桌布,桌布的面积是几? 不锈钢卷的内经是300mm,宽是40mm重量是60千克,密度是7.75怎么算直径? 名人爱国故事读后感!联想到别的故事! 欣欣家的桌面是半径为5分米的圆形,她想在桌子上铺一块直径比桌子直径大3分米的台布,问台布的面积是多少? 吴江市的四种颜色的垃圾桶分别代表哪四种垃圾? 太阳光和灯光有什么本质的区别?对植物的效果是一样吗 一块边长是80厘米正方形台布恰好将一个圆形的桌面盖住桌面的面积? 根据以下材料说明汉高祖刘邦有怎样的性格特点?《史记.淮阴侯列传》 上常从容与信言诸将能不,各有差.上问曰:“如我能将几何?”信曰:“陛下不过能将十万.”上曰:“于君何如?”曰: 硅酸盐水泥的技术性质有哪些?最好说的详细一点 用一块边长为80厘米正方形台布恰好将一个圆形桌面刚刚盖住,桌面的面积是 读第2,3自然段,这样的交流说明两个人各有什么想法?说明她们各有什么样的性格特点 太阳光与灯光性质有何区别??大哥大姐们帮帮忙! 圆形桌面的直径1.6米,按圆桌的大小做一块桌布,桌布的面积是多少平方米?再给桌 概括说明我国外交成就的主要特点? 电灯光与太阳光本质的区别是 不锈钢饭盆的黑色物质我想问一下为什我买的不锈钢盆洗了好多回,手上使劲擦还是会有黑色的物质,我洗了好多遍,用洗洁精,热水烫还有使劲擦都没用,我现在感觉放东西在里面吃好可怕啊! 学雷锋 做一个有道德200字读后感 圆的直径是20厘米,求中间正方形的面积 不锈钢盆经火烧后变黑如何清除 学雷锋做有道德的人读后感(1500字) 太阳光由7色组成,看起来是白色,而为什么将7种颜料混合却成黑色了?怎么才能用颜料混合成白色?我要的是怎么才能配成白色?用什么颜料才能配成白色 下图中圆的直径是20厘米,求正方形的面积!急 一个底面直径为20厘米的圆柱形玻璃杯装有一些水,水中放着一个底面直径6厘米,高20厘米的圆锥形铅锤.当取出铅锤后,杯里的水下降几厘米? 太阳光由红橙黄绿青蓝紫7色组成,看起来是白色,而为什么将红橙黄绿青蓝紫7种颜料混合却成黑色了? 爱国故事读后感(最好是钱学森得) 超急啊!今晚就要啊 一个底面直径为24厘米的圆柱形玻璃杯里有水,里面放有一个底面直径12厘米,高18厘米的圆锥形铅块,当铅块取出时,水下降多少厘米? 为什么硅酸盐水泥和普通硅酸盐水泥早期强度低,后期强度高?抗腐蚀能力强?水化热低? 关于爱国的读后感有关爱国的文章读后感,例如:读《詹天佑》有感、读《祖国,我终于回来了》有感等等.每段的段末要写出段意. 1个直径是20厘米的圆柱形玻璃杯中装有水,水里放有一个底面直径是6厘米、高为10厘米的圆锥形铁块.当把圆 掺混合材料的硅酸盐水泥耐水性好么 爱国读后感? 一个底面直径是20厘米的圆柱形玻璃杯中装有水,水中放有一个底面直径为6厘米、高20厘米的圆锥形铅锤 下看但铅垂取出后,杯子里的水面会下降多少米.我要列式和讲解. 读《爱国故事》有感 请告诉我和钱学森一样爱国的人的事例吧,写读后感.好的追加悬.快啊,这个上午我要写完的 哪里可以定做不锈钢垃圾桶 环保垃圾桶 读什么故事有感 关于爱国读后感的题目 深圳哪里有买分类不锈钢垃圾桶也可以定做不锈钢垃圾桶?
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn