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

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

.NET开发者必备的工具箱 热情不减!七款Swift应用开源项目推荐 如何给苹果提交Bug或功能需求? 深入钻研Augular两年 谈谈其究竟适用于哪些场合 唐巧:谈谈React Native 在Swift中,如何更优雅地处理网络返回数据? Spark生态系统解析及基于Redis的开源分布式服务Codis 阿里巴巴技术专家杨晓明:基于Hadoop技术进行地理空间分析 Bowery为什么放弃Node.js,转向Go? 《近匠》有了APM,用户快到碗里来——专访听云CTO Wood 联通WO+梦工厂唐敏:走进厦门 构建移动数字生态 HTML5 VS 原生,世界究竟是谁的? 完全开放 微软开源.NET Core的执行引擎CoreCLR Swift与Objective-C的兼容“黑魔法”:@objc和Dynamic 网络技术,从“数制”开始学起——跟随王达老师一步步学习 UPYUN CTO黄慧攀:UPYUN这些年,一段“刚好”的旅程 2015移动游戏重中之重:需成功把握1%付费用户的心 UNITE 2015 BEIJING 20大议题首爆 死路一条?智能硬件免费没有未来 APICloud推出“模块 Store” 公布APP创业 “Time to Market”战略 极路由加入海尔U+联盟 可跨品牌控制多款家居设备 《近匠》Amaze UI:做最懂中国程序员的开源HTML5框架 Testin CTO徐琨:要做测试领域的阿里云! TIOBE 2015年2月编程语言排行榜:JavaScript排名达历史最高点 机智云发布第二代GoKit开发板,兼容Arduino与Intel Edison 计算机视觉,让冰冷的机器看懂这个多彩的世界 昔日学霸反哺教育 打造教育领域今日头条 第三方DevOps实践报告发布 84%中国企业预将受益 《程序员必读之软件架构》作者Simon Brown:架构师与程序员的区别 Xcode 6.3 Beta发布,Swift 1.2带来哪些新变化? 应用生与死:移动测试究竟该怎么搞? 一个非常棘手的问题,求求各位了!是关于字符转换的!求求各位大侠! 找人 寻C语言编程高手!现有一IP地址和网页、搜索栏关键词拦截程序需要编写,付酬!!! 关于Dll里导出VCL控件的问题。。。高手请进。。。。。。 紧急求救!!! 如何制作浮动面板? 给分的问题! 如何获得 mod_webapp.so 紧急求救 想知道各位WINDOWS下用什么SNIFFER? 对于网络上的第三方控件的看法 简单问题?JTable中的数据如何居中对齐,有没有直接的函数(不用自定义CellRenderer) 有关析构函数 请问一个小问题 关于ADO中ltBatchOptimisticr的FilterGroup的问题 两个星要到多少分才能升到三个星呀 请问有谁知道北京的成人教育大致的情况如何? 是VC编译器不符合ANSI C++,还是?? 我现在在写个程序!是关于证券方面的!可是如下的一个小问题如何解决?? ★★如何让excel的某行的值等于另一行的值乘以一个固定值(急问,在线等待)★★ @@@开学了,散分! 怎样构建一个LDAP服务器和怎样使用 用VFW采集时进行压缩的问题。求解 C# 在DW MX中如何进行层定位? 回复:機會不要錯過! 華強科技有限公司幫你成就軟件工程師的夢想! How to access SMB/CIFS from Sun workstation? 谁来拿分啊。我有一个问题自己解决了,但没有给分的对象。 问一个message Bean的问题,up有分 [EJB]HelloWorldBean正确编译配置和执行,但"HelloWorld"却不见了 寻C语言编程高手!现有一IP地址和网页、搜索栏关键词拦截程序需要编写,付酬!!! 如何让主界面变成三维的那种 寻C语言编程高手!现有一IP地址和网页、搜索栏关键词拦截程序需要编写,付酬!!! 用什么组件能得到网站上的末知大小的文件? 问一个简单的问题 还是有问题关于获得选中安钮的当前行,请进>> 请教简单问题,如何将菜单的一个选项隐藏。就是类似cb的将Visible=false的做法!! 连接ACCESS数据库的问题? 寻C语言编程高手!现有一IP地址和网页、搜索栏关键词拦截程序需要编写,付酬!!! 如何提取一个EXE文件的特征码??要高分者和高手进!!!!来者有分! j2ee配置问题,大家帮我看看,错误出在哪里?谢了! 如何在注册表中修改使得浏览的网页可以即时通过工具栏的“编辑”调用DW修改? "聊聊"网站是怎样建的?用拉什么技术,可以即使聊天? 类型转换,非常奇怪的问题。高手进来 搞纯C++的大虾请进 关于MDI Child窗口的一个问题? DOS6.22的下载及6.0源码 sql语句问题:怎样从表中选出字段值包含在一个变量字串的那条记录。100分!在线等待! 关于那个mesh绕自己中心(注意是自己中心)旋转的问题我还没有解决 抛砖引玉: 证券行业软件之数据库存储。 如果下面这个问题谁能解决,我跪下来拜他三下:在WIN2000里,通过更改注册表,以达到更改IE的页面设置(一定要能更改横向:orientation和 北国之秋有怎样的特点 劝诫人们学无止境,奋发努力的名句有那些 急~~寒假作业上的…… 小学五年的生活一晃而过,真是( ),( ) .(写两个表示时间易逝的成语)我即将参加六年级毕业统考了, 给你一张经纬网的图,在上面标几个点,要你写出那几个点的位置,怎么看怎么写? 人的一生要经历多少事情?几经挫折你才会得到你理想的爱人 事业 家庭 朋友 成功 小学生活一晃而过,真是 .(写一个表示时间易逝的成语)下学期我将参加六年级毕业统考了.看看今天糟糕的成1.小学生活一晃而过,真是 .(写一个表示时间易逝的成语)下学期我将参加六年级毕业 大学一节课多长时间 齐白石老人这一生的所有作品有哪些? 人的一生会经历许多的事,我们不应该只看到伤痛,我们应该善于寻找幸福.人生多磨难,何以强求太多,顺其自然,你会发现生活并不可怕.破碎的心无法使其完好如初,但是可以重新拾起,用心呵护, 甲乙二人分别以每小时3千米和5千米的速度从A、B两地相向而行,相遇后二人继续前行,如果甲从相遇点到达B地需4小时,那么AB两地相距多少千米? 孔子这一生最遗憾的是什么?他青年时期、中年时期、老年时期的主要事迹是什么?我不是要写作文,而是要演话剧,看过《孔子》这部电影,无奈有些看不懂,对孔子还是有些不太了解, 人生不幸之事犹如一把刀……“人生不幸之事犹如一把刀,它既可以为我们所用,也可以把我们割伤,这要看我们究竟抓住了刀刃,还是握住刀柄” A、人生难免有挫折B、挫折既有消极作用,也有 一个圆柱形水桶,放入一段底面半径是5厘米的圆柱形钢材.如果把他全部放进水中,桶里的水就会上升9厘米,(水没有溢出)如果把水中的钢材露出水面8厘米,这时桶里的水就下降4厘米,求圆柱形 一张厚度是0.06厘米的纸对折40次后为什么大于地球到月球的距离?充分理由 把一张纸对折再对折,重复下去,第43次纸的高度是地球大月球的距离.纸厚0.006CM.距离385000KM相信这个人的说法吗? 请详细说明,谢谢了哦 ! 我求你们了 呜呜~~~~~~~~~~~~~~~~~~~ 一个圆柱形水桶,放入一段底面半径是5厘米的圆柱形钢材.如果把它完全放入水中,桶里的水就会上升9厘米, 油菜籽什么时间种植最佳能挤油的菜籽、和大白菜籽相仿 如果将一张纸裁成两等份,把裁成的两张纸摞起来.第43次后所有纸的高度便相当于地球到月球的距离.”请给一个合理的理由,并请告诉0.006的43次方是多少?一张纸的厚度为0.006cm地球距月球约3850 在一个圆柱形的水桶里,放一段半径是5厘米的圆柱形钢块,如果把它完全放入水中,桶里的水就上升9厘米,如果把水中的钢块露出水面8厘米,那么,这时桶里的水就下降4厘米.钢块的体积是多少立 一张纸对折100次,有月球到地球的距离吗? 面对困难,我们应该说什么名言警句来激励他人? 玉兔会说话吗,就是微博里“月球车玉兔”所发的微博是从月球发来的. 某村去年种植油菜籽300亩,油菜籽的含油率是百分之四十,今年改为新选育的油菜籽品种,在种植面积比去年少44亩的情况下,油菜籽的亩产量比去年提高了20千克,且油菜籽的含油率也提高了10个 初中第一节体育课到底会干什么啊啊?急 月球车玉兔的微博是它自己发的吗?为什么它会发微博,最主要的是还这么萌? 天燃气货车怎么样 在那能买到PH值试纸 有两个容器.一个可装500毫升,另一个可装水700毫升,现在用这两个容器量水,你能量出100毫升的水吗?回答是语言简单点. 论如何教好初中地理 PH值试纸那里能买到? 7.783亿等于几万 帮填一下成语:日()()日 提高警惕的名言警句大哥, 7.03亿等于几万急! 假如你是一位世纪老人,见证了罗布泊的百年沧桑,你将向人们诉说什么 挖土深度大于5m,按土体稳定理论计算后的边坡进行放坡.我们挖土是11米,应该放多长距离 马克思主义政治经济学对社会主义市场经济建设的指导意义?希望大家好好回答,我还可以追加悬赏分的.如果不是原创,最好写明是在哪抄的. 假如你是一个世纪老人,见证了罗布泊的百年沧桑,你将向人们诉说什么? 警惕名言如何提高个人警惕性? 社会主义市场经济条件下,如何发展马克思主义政治经济学 假如你是一个世纪老人,见证了罗布泊的百年沧桑,你将会向人们诉说什么? 我工程采用条形基础,基础大放脚宽为1.5m,基槽深度为2.6m,采用放坡施工,边坡比1:1.我工程采用条形基础,基础大放脚宽为1.5m,基槽深度为2.6m,采用放坡施工,边坡比1:1,基础施工工作面为15cm,计 鉴于08年经济危机,说明我国应如何发展社会主义市场经济(政治经济学常识角度) 穿越一个世纪,见证沧桑百年,刻画历史巨变,一个生命竟如此厚重.答对有奖什么时候出来的说得谁? 哪些地区以面食为主、 1.东北平原 2.江南水乡 3.华北平原 4.黄土高原只要一个最准确的啊 谁有什么好看的历史或人物传记吗?最好是关于达芬奇 或者 达尔文 的 一些巨著也可以! 给出书名 谢谢拉 挖土方、地槽、地坑放坡起点深度、放坡系数、工作面如何确定? 1北方地区年平均降水量为()-()毫米,属于什么区.2人们把东北平原称为()黄土高原和华北平原称为() 600毫升的水质量是多少 地球到月球的距离384公里,用一张长0.2毫米的纸,折多少次可以到达 哪里可以买到PH试纸 推荐一些中国历史人物传记 一张纸约0.06厘米厚,将它对折43次,可能等于地球到月球的距离吗?为什么? 在哪里能够买到PH试纸只是一个小县城,别弄什么太高级的地方,没太多的条件,不过要一些普通的场所道还有!THANGK YOU! 故都的秋里,北方的秋和南方的秋各有什么特点? 告诫自己,如果现在不努力学习,以后就会后悔的精辟名言就是告诫自己要珍惜时间,好好学习,强调“不然以后会后悔”,要贴在桌子上告诫自己的,希望比较精辟的,不要那些常见的,因为常见的 哪儿可以买到pH试纸? 故都的秋 郁达夫 写出了北方秋的什么特点 告诫人们学无止境,奋发努力的名言 在哪里能买到PH试纸
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘