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

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

如何提高Web服务端并发效率的异步编程技术? 改改改!让应用通过审核出人头地的10个方法 正益无线CEO王国春:AppCan如何获得50万开发者青睐 在收购Xtreme Labs之后,Pivotal推出PaaS移动服务 .NET开发者必备的11款免费工具 .NET开发不可错过的25款高效工具 Docker最佳实践!尽在2014 Container技术大会 pflua:用Lua编写的高性能网络包过滤工具箱 掌上明珠张磊:如何设计手游付费体系 云游科技何千军:游戏开发和后端逻辑经验 《近匠》Highway1:孵化,不只是简单的帮助 嘉宾来了 MDCC 2014首批演讲嘉宾名单公布 前雅虎CTO:Hadoop扩展过程中的7个危险信号 【云先锋】星环TDH:性能大幅领先于开源Hadoop2的技术架构赏析 一周消息树:我想创业,但不懂技术怎么办? GitHub迁移数据库,借助MySQL大行其道! 实例亲授:教你如何创建AR应用 iOS七年,苹果都为开发者准备了哪些工具? TIOBE 2014年9月编程语言排行榜:Java、C++跌至历史最低点 如何甄别具有软实力的IT应聘者? 避免关注底层硬件,Nvidia将机器学习与GPU绑定 盘点MIT Demo Day上4个最有前途的创业点子 IDF 2014第一天纵览:智能设备唱主角 时尚化才是可穿戴的未来 ASP.NET之父Scott Guthrie:借技术之力铺平未来之路 两年测试,NSA或将让其数据中心洗上油浴 【云先锋】数云:另类淘宝创业,瞄准背后百万卖家的数据挖掘 Xcode 6 GM、6.1齐出,Swift终迎1.0版! 我眼中的Devops——倍道而进! 英特尔物联网世界:提供开发工具包,实现万物互联 三十功名尘与土——我的程序员生涯自白 触摸未来:为什么说AR是未来最重要的人机界面? (帮我搞定,高分相赠,在线等待!)ASP上传图片到SQLServer,为什么老提示对象不支持appendchunkmydata方法? CheckBox可以同时传递多个值吗? 请问有用过visual interdev的,如何让interdev也像dreamweaver可以在写程序的时候显示代码在哪行的啊.多谢了 请高手帮忙解决我的问题,在此表示谢谢! 有关datagrid 和webform 的问题 程序员的艳遇。。。。。。 验证字符串问题 IE问题!好烦人啊!那位高手能帮我解答! 怎么在建表时使用一个时间函数??就是指出加这条这条文件的时间?? 高手请进,多数据库链接的问题 如何成为一个程序员? 事务以及回滚的问题 有做完一个作业,放60分。 关于ASP调用VC编的DLL接收返回参数的问题 我提问,大家回答 有没有关于触发器的电子书籍? 怎么能够获得数据库的连接字串呀?? 大讨论:目前用什么工具、做什么开发最能赚钱?散分啦!感兴趣的程序员们快来!! 在IE中,打开某个页面,会连接到www.lop.com页面 关于islower(ch),isdigit(ch) 疑问 BQQ的服务器端有没有保存用户的聊天记录的? 如何获得程序方向键输入?多谢! 求助有关IFS-HOOK 高手请入!!急救!求msflexgrid 的打印源码????? 如何在list中显示文件夹 哪里可以看到Obejct类clone的实现方法? 系统的FOUND.00*文件夹里放的FILE000*是什么文件?可以删除吗?刚装系统时没有这些文件的阿 给分啊 今日郁闷之至……散分! 来来来,大伙们一起来衷心祝愿xxmm (晓箫)的老爸老妈顺利赴美参加晓箫的毕业典礼!! Dev-Cpp 使用 NetAPI32.lib 的问题 急寻严蔚敏,吴伟民版《数据结构习题集》c语言版的答案,请问哪有啊 高手们给我一个超级简单的HOOK API的例子好吗?求你们了。 错在哪里 好郁闷啊~ 谁有站内关键字模糊查询的代码?紧急求救、在线等待!!!! 字符串转化为数组的问题 讨论<<标准C++库大全>> 上次是哪位兄弟要的《新编API参考大全》CHM版呀?我找到了一个,还行。 欢迎大家访问我公司的网站! 请学c++builder 有份量的人推荐一本经典的教材(适合初学者) 欢迎大家访问我们公司的网址! 关于分页的问题 请帮我看看这个小程序 欢迎大家访问我公司的网站! 已知一个文件夹的路径,如何得到该文件夹中的文件的名字? 关于StreamReader的问题 欢迎大家访问我公司的网站! 2013中国的大事件 I don't like the dictionary.My brother doesn't like the dictionary.(用neither…nor…连成一句话)Jack and Tom are classmates.(改为一般疑问句)I bought a watch for my dad.(对划线部分提问)全回答另加20分 what has been done with the old books?这个句子那个是主语、.怎么理解这句话啊?我觉得the old books应该在has和been 的中间,我的想法对吗? Does Nick has an orange bag?下列句子中均有一处错误,请指出并改正 master blaster until the end这首歌、还有就是歌怎么就3min40s 歌词还有那么多句 谁有4分多的版本 不是被DJ改过的版本噢[00:00.91]Master Blaster - [00:01.48]Standing alone in the twilight[00:04.59]Somehow I feel you there What ____ with the clothes?A.has been done B.has done C.have done D.have been done 为什么说人类社会最终会走向灭亡. 求个master blaster until the end MP3下载 《昆虫记》之《孔雀蛾》读后感,急不要一整部《昆虫记》的读后感!只要《孔雀蛾》的读后感不是一整部《昆虫记》的读后感只针对《孔雀蛾》!明天交 (原创)孔雀东南飞 自己写的!君妾情依依,惟恐情不专.情不专亦恐,犹恐父母命.虽与君相誓,情如磐石坚.风吹日雨落,磐石不复坚.与君离别亦,心如刀割绞.情丝难断矣,无奈与君别.来世情再续, Master Blaster - Until The End 求这首歌的MP3格式, 昆虫记的孔雀蛾一文的读后感600字!急!谢了! 热有极限吗?温度的最低是-273.15C,最高呢?有极限吗?人类所知最高温是什么?是多少? 跨文化交际教程 案例分析.III.CaseAnalysis (20 points)In India,a white Sari(纱丽服,一种女性服装) symbolizeswidowhood,while in the west,a white dress symbolizes purity.Answer the following questions:(1) What might theseIndian women t I didn't know which T-shirt was 什么,so I took themboth选择A nicer B well C worse D good Time machine 是正宗英语吗? 程序设计:猫大叫一声,所有的老鼠都开始逃跑,主人被惊醒.(C#语言) 要求:1.要有联动性,老鼠和主人的行为是被动的.2.考虑可扩展性,猫的叫声可能引起其他联动效应. 口语交际诚信的好处 由于系统故障导致安装comodo的目录被格了,于是我就想重装comodo time machine,但是安装时总提示重启系统,但是重启后还是装不了,清理过注册表也不行,yandekiss 你回答得有点技术含量好不好,就算 请写出你对于它们的感觉的形容词,也就是用什么词来形容它们:狗···猫···老鼠 口语交际 婉转拒绝的好处 找经典对联.优美好听的,几个好听的,语言优美.或者是朴实的.一定要让人一听就很舒服的.11ban 禁抄 time,the,on,shorts,new连词成句 i didn't know white t-shirt was(),so i took them bothA.nicer B.well C.worse D.good问下为什么还有这句话的意思 HE has an orange bag改为否定句 the,let,new,try,me,hat,my,on,son怎么连词成句 英语翻译其中 either own 和 use of 把“He has an orange.”改为陈述句和否定句.本人英语实在是不好.希望会英语的同学可以帮忙说一下. you,the,for,thank,new,shorts.怎么连词成句 昆虫记的主要内容400字 He has a black bag.(改为否定句) 一个物体的质量3000KG.分析下列情况下起重机钢丝绳对物体的拉力有多大.【G取10N/KG】1.物体以2M/S的速度匀速上升2.起重机悬吊着物体静止不动 34.Will you _____ it that this letter gets mailed today?A、see off B、see to C、look after D、look into选哪个为什么? Tom ofter does morning exercises.Tom ofter does morning exercises. 改成否定句和一般疑问句! ( )exercising,and you'll be healthier A.Keep B.To keep C.Keeping 希望可以说一下为什么 这次口语交际,请谈谈应该怎样上网才对我们小学生有好处,并把你想说的话写下来.快. food / drink / fruit / candy 这四个单词可数不可数问题1.个人理解 food / drink / fruit / candy 表示它们本身意思的时候都是不可数的,而表示它们各自的种类的时候都又是可数的名词了.可以这么理解吗? _____exercising,and you will be healthier A.keep B.To keep C.keeping D.kept为什么可以直接用keep,而不是to keep,或是keeping? 在口语交际教学中,为什么要遵循口语交际的特点和针对学生的实际选择教学内容? he has an orange 的复数是什么 英语:请用12个词填空.HURRY UP Word:an apple,an egg,a tomate,apples,tomatoes,eggs,sugar,milk,tea,chicken,cake,cheese.write:‘You must lose weight,'my doctor said to me,‘You mustn't eat( ).They're bad for the heart.'‘Can't I have( )for brea put to在这里的意思上下文如下:The authorities demand answers to questions that one would hesitate to put to one's intimate friends. drink到底可数还是不可数?We'd like something ( ) .括号中的填drink还是drinks what had been done had been done. time to go to the store意思 他们说,蔺相如怕廉颇像老鼠见了猫似的.再写一个有相同修辞手法的句子,快 Hurry up.Don't be什么 I'm a store to work. 他们说,蔺相如见了廉颇像老鼠见了猫似的,仿写句子 America has never been about what can be done for 有"您的"这个词语吗准确一点的哦那有“您们”这个词语吗? 蔺相如见了廉颇像老鼠见了猫似的仿照句子人们说,蔺相如见了廉颇像老鼠见了猫似的.______见了______像____________ “stupid”音标是怎么写的呀 昆虫记里描写独角仙、凤蝶的片段, 仿照 “蔺相如怕廉颇像老鼠见了猫似的”这个句子的写法写一句话 One never notices what has been done; one can only see what remains to be done.中文意思是什么? 甲、乙两人匀速按相反方向绕圆形跑道跑步,出发点在直径的两个端点.如果他们同时出发,并在乙跑完100米时第一次相遇,甲还差60米跑完一圈时第二次相遇.那么跑到长多少米? 《孔雀东南飞》编写或改写或续写要现代文, 1、蔺相如见了廉颇像老鼠见了猫似的,为什么要怕他呢!用了什么修辞手法2、大虫见掀他不着,吼一声,就像半天里起了个霹雳,震得那山冈也动了用了什么修辞手法3、日本到处有樱花,有的是几 下列句子各属于什么句式.1.别人送我一直小松鼠.( )2.这么远,见哪能射到呢?( )3.蘑菇都到哪儿去了呢?( )4.原来松鼠是我们家的小偷啊!( ) 男子电话打到派出所求厕纸 不多久再抱杭州13岁女生撒谎离家失踪5天 曾结医生举报官员公款出游 出门戴钢盔执擀台湾花莲地震波及浙江 温州某酒店上演台湾花莲地震波及浙江 居民称高楼摇晃国家级电视剧节目推介会首次移师杭州杭州政协委员建议传统产业“电商化”杭州重机厂将变身时尚商业中心浙江省提前3个多月完成全年保障房任务杭州未来两年技术研发类人才需求最大感动!美男子车祸变残障女友不弃结连理英老年人养鸡遣寂寞 送鸡上学生活忙【英汇丰银行报告:中国成为2013年度以色列军队炮击加沙打死一名巴勒斯坦人壮美!摄影师抓拍冰冻海浪翻滚瞬间【高英汇丰银行报告:中国成为2013年度港媒:中国小偷泰国免税店内行窃后坐飞娜塔莉·波特曼:参演《雷神》,主要是奥巴马豪华座驾“野兽”细节曝光美国务卿将访欧洲中东八国 重申与沙特美空管局解除禁令 飞行全程可使用电子Love\\\'s Philosop虚拟现实技术 是否真的可以打破PC浏无双类手游是否可以突破RPG困局施恩奶粉送千张团圆券,助候鸟妈妈春节何时退役?马布里:取决于身体状况别不相信 看脸型就知道孩子性格好与坏张翰奇:CBA新秀工资有点低NUK品牌荣获妈妈网、妈咪宝贝杂志等不是自动驾驶,沃尔沃下个项目竟是..睡前洗发养护发 康绮墨丽最在行任性还是拼命?陈晓东老婆相隔5个月再华为集于一身的压力 看企业如何还击博士攻略 海岛奇兵野人通关博士6路线新生BB尿血急坏娘!从小便看宝宝健康离开地球表面,空间太阳能潜力无限女人心海底针 解剖老婆收礼心态!【A股惊魂15日复盘】中国神车变灵车《长篇童话:飞越沧海的蝴蝶妞妞》(1苏宁红孩子2015年全球供应商大会暨最漂亮的flash漏洞曝光,专家:卸从八年网友年会透析互联网用户新趋势
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘