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

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

【特别提醒】2014中国大数据技术大会门票全面告罄 不接受现场购票 累计4000万美元 Qualcomm在华投资5家公司 支持Android、WatchKit开发,全新RubyMotion 3面世! 快速开发移动医疗App!开源框架mHealhDroid 2014CVW﹒产业互联网大会解密未来20年 Nimble VR的收购与一封来自友商的感言 Google Earth API将在2015年12月彻底关闭 AR、美颜、机器人:计算机视觉库几乎无所不在 不激增,无爆收,年度最佳手游为80 Days带来了什么? 《近匠》机智云CEO黄灼:跨越智能硬件的“鸿沟” 智能手机≠智能家居!我们要的究竟是什么? 亚信大数据事业部总经理张灏:打通各行业数据壁垒 让大数据变现畅通无阻 Web App和Native App不是生死之争,而是可以和平共处! 微信之父张小龙说微信坚持“去中心化”,这样真的好吗? 亚信CFO武军谈进军海外市场成功经验 前瞻性思维是开路先峰 Swift,任重而道远! DevOps系统的变迁 玩转Docker镜像 “扫描建模”速建AR应用 Vuforia 4.0 SDK更新 硅谷里的外星人:纵观Reddit十年风雨路 不见不散 Cloud Foundry Meetup活动将首次走进杭州 独立开发者:新手做2D手游该用哪些工具? 求安全化危机!Uber研发生物识别技术、聘请前亚马逊运营 JavaScript社区开发者调查:服务端JS盛行 AngularJS使用者最多 去中心化、去中介化,微信商业化路径清晰了吗? 微信企业号认证简化了,你造吗? 专访瀚思安信联合创始人:大数据技术助力企业实现主动智能防御 挑选IBM Bluemix作为云平台的10大理由 10年技术积累成就极光压缩引擎,欧朋流量宝5.0面世 【图文实录】12月19日CTO俱乐部走进杭州 mlpack:可伸缩C++机器学习库 moden是否有物理地址 如何用Delphi或C++Builder代码实现一个程序关闭另处一个应用程序。 请各位推荐几本好一点的JAVA参考书,THANKS 这样的代码为什么不能连接SQL SERVER数据库 当二个进程运行时,几就是两次运行FTP 动画关闭窗体API的问题 什么叫串行端口,什么叫并行端口? 程序员级考试就是中级考试吧 各位高手:请问*.html和*.htm文件有何区别? 在活动目录中如何实现组的嵌套? swing窗口布局的问题 毕设还要翻译6000子科技文献,谁介绍一篇呀! 介绍几个考中级的网址来噶 CNET网站重新架构,我们的链接也要改了~~ 急,真的急 各位,有谁能告诉我怎样使得程序中每个Show的窗体都以新窗体出现在任务栏。(答对了一定加分!!!!) 能不能获得来访者的计算机名 help me!高手请看! 11号帖子,救命呀,很急,很重要! 怎样在恢复一个被删除的文件时恢复文件全名? 我急!深夜提问!大家看一看 有谁告诉我Microsoft Visual InterDev 6.0如何使用其中的站点管理 如何在Word工具条上加一个按钮 请问系统和上网的速度有关系吗 急需foxpro for win版,哪有??? 请教一下,ado.net里如何返回表里的行数? 如何在HTML页面中使用 Acrobat 的 PDF 阅读器控件 关于一个遗传算法得问题!! 请问一个TSR问题! 关于跨数据库查询的问题 请问在ListBox中可不可以将每一行字符串设置成不同的颜色? vb6.0中如何将dbgrid里的内容添加到数据库里? 请问怎样才能将窗体上的最大化按钮设置成无用,而保留最小化按钮? 各位专家:请问win2000 PRO 下的config.msi目录中的好多以rbf为扩展名的文件是什么文件?有什么用?可以删除吗? ASP.NET中DATAGRILD的烦人处 新手问两个简单的问题??? 想知道如何才能看见前页纸油笔写过后留下的字迹?(散分) 为什么用odbc连接的paradox表不能编辑? 哪位大侠帮看一下代码(关于链表),为何出"invalid type argument of `->'"的错 一个非常非常想从事计算机软件开发的愿望 关于Hook的一个小问题 文档视图结构中无法显示编辑框,怎么办啊??用什么代替啊 十万火急! 通过网络,进行语音聊天的程序。 你了解人工受精吗? 有关“无纸化考试系统”bow api中的常量 关于addslashes的问题 有关“无纸化考试系统”的问题??thanks all,bow 如何删除windowsXP?紧急!!! 【数据结构】考试用的是类pascal还是c语言 我想往服务器中传文件。请问,需要组件吗? 在锐角△ABC中,b=2,B=π/3,sinA+sin(A-C)-sinB=0,则△ABC的面积为 二次函数两根距离公式是什么 D,E在B,C上,F,G分别在AC,AB上,且四边形DEFG为正方形.如果S△CFE=S△AGF=1,S△BDG=3,那么S△ABC等于多 在三角形abc中,已知bd和ce分别是ac,ab边上的中线,且bd垂直于ce,bd等于4ce等于6,求三角形abc的面积 在△ABC中,设角A,B,C的对边分别为a,b,c,且cosC/cosB=(2a-c)/b,求角B 二次函数交X轴两点之间的距离公式 滑轮组中摩擦力移动的距离和绳子移动的距离一致吗 已知x的平方-y的平方=8,x-y=2,求x的平方+y的平方的值 在三角形ABC中,角A,B,C的对边长分别为a,b,c,若A-C=π/3,且a,b,c成等差数列,求sinB值等于 已知三角形ABC的面积是根3,角A,B,C所对的边分别是a,b,c,而且sin2C=sin2A+sin2B+sinA点乘sinB,求角C已知三角形ABC的面积是根3,角A,C所对的边分别是a,b,c,而且sin2C=sin2A+sin2B+sinA点乘sinB。1求角C. 已知(x+y)的平方=12,(x-y)的平方=8 求x的平方+y的平方的值 三角形ABC中A.B.C.成等差数列,则sinB等于 物G重90N,受如图所示滑轮组作用时,在拉力F为20N时恰好作匀速运动,则物体所受摩擦力大小是 N,摩擦力方向是 ,若F在5s内前进了5m,则重物G移动的距离是 ,G移动的速度是 . 如图,在三角形ABC中,AD,BE,CF是三条中线,它们相交于同一点G,问三角形AGF和三角形AGE是否相等?为什么? 在三角形ABC中,a,b,c成等差数列,则sinA乘以sinB等于多少? 已知:如图,在三角形ABC中,AB等于BC等于CA,AE等于CD,AD和BE相交于P 点,BQ垂直已知:如图,在三角形ABC中,AB等于BC等于CA,AE等于CD,AD和BE相交于P 点,BQ垂直AD于点Q .求证:BP等于2PQ △ABC中,∠B=480,AB=AC.AD是BC的高,CE、CF是∠C的三等分线,分别与AD相交于E、F,BE交AC于G,求∠AGF 已知两根,如何求一元二次方程? 几何证明 如图,在正三角形ABC中,点D,E分别在边BC,CA上,使得CD=AE,AD与BE相交于点P,BQ垂直于AD于点Q,求QP/QB值 已知B(-6,0),C (6,0)是三角形ABC的两个顶点,内角A,B,C满足 sinB- sinC=1/2sinA,求顶点A的轨迹方 一元二次方程,两根的和与两根的积与系数有什么关系 已知方程(a-4)X|a|-3+2=0是一元一次方程.则a=? 已知4x²=144,y³+8=0,求x加y的值. 在三角形ABC中若abc成等差数列角B=30度S三角形=3/2求b三角形ABC中,abc分别为ABC的对边,如果abc成等差数列,B=30度,三角形ABC的面积为1.5,求b下面这个好象是错的↓http://zhidao.baidu.com/question/56093114.html 一条路,已经修了30%,距离中点还有1000米,这条路有多长 二次函数中抛物线与x轴交点间的距离公式 已知函数f(x)=1-2a-2ax+2x2在定义域【-1,1】上的最小值为m(a)求m(a)的表达式 二元一次函数求最值1.5X-0.75Y+1 1>x>y>0 求该函数的最大值 此事 X Y各等于多少 已知B(-6,0),C(6,0)是三角形ABC的两个顶点,内角A,B,C满足sinB-sinC=1/2sinA,求顶点A轨迹方程. 以知函数f(x)=1-2a-2ax+2x^2在定义域【-1,1】上的最小值为m(a),求m(a)的表达式 在三角形ABC中,角A,角B,角C的对边分别为a.b.c,若b*cosC=(2a-c)cosB,角B的大小是多少若b=根号7,a+c=4,求三角形ABC的面积 求二次函数图像与x轴两个交点的距离的公式 已知函数f(x)的定义域为(0,+∞),且f(x)=2f(1/x)+x,求f(x)的表达式 在三角形ABC中,a.b.c分别是角A,B,C的对边,且COSB分之COSC=-b分之 2a+c,1.求角B的大小2.b=根下13,a+c=4.求三角形ABC的面积 在△ABC中,已知B(-1/2,0)C(1/2,0),顶点A移动时满足sinC-sinB=1/2sinA,则点A的轨迹方程是?我知道可以化为c-b=1/2a.可是然后捏. 若三角形ABC的三内角成等差数列,则1+sin2B/sinB+cosB= 在△ABC中,a,b,c分别是角A,B,C的对边,且cosC/cosB=2a+c/b,则角B的大小为_求详解,要过程.谢谢! 二次函数与X轴两交点间的距离公式是怎么得来的?我知道是绝对值a分之根号Δ.老师上课演算过,忘抄了.不要只是答案, 直角三角形内心有什么特别性质呢?是直角三角形的内心,不是不同三角形的.请帮忙想一下如果这个三角形是直角三角形的时候,内心有什么新的性质呢?一楼那个是不同三角形都有的性质。 两根之和 和 两根之积各等于什么是两个专有名词.好像一个等于一次项系数的相反数,还有一个等于常数项. 在三角形ABC中,C(-4,0) B(4,0),且点A运动时满足sinB-sinC=1/2sinA,求A点的轨迹 用直角三角形性质, 两根之和等于?还有两根之积等于 已知ABC中,B,C是两个定点,并且sinB-sinC=1/2sinA,则顶点A的轨迹是什么 直角三角形的性质怎么做? [紧急] 两根之和,两根之积等于什么? 如图,在△ABC中,AD、BE、CF是三条中线,它们相交于同一点G,(1)△AGF的面积和△AGE 已知:x是(﹣3)的绝对值的相反数,y是﹣2的绝对值,求2x的平方-y的平方 已知(x平方+y平方)(x平方+y平方-8)+16=0 求x平方+y平方的值 如图所示,人重600N,木板重为400N,人与木板,木板与水平 地面之间动摩擦因数为0.2.现在人用水平力拉绳,人受的摩擦力是多少 方向?答案是100N 和水平向左.这道题网上有 但我看不懂 求详解. 已知x+y-4的绝对值与(2x-y+7)的平方的值互为相反数,则x*x*y=? 二次函数的两根之和和两根之差公式 4.如图,已知正方形内接于△ABC,△AFG的面积为1,△BDG的面积为3,△CEF的面积为1,求正方形DEFG的边长 2x-5的绝对值与(y+3)的平方互为相反数,求2x-y的值?2x-5不等于0时2x-y的值是? 二次函数中的两根之和,两根之积怎么求 三角形ABC中,正方形DEFG的顶点D、E在BC上,另两个顶点G、F分别在AB、AC上,且S三角形AGF=S三角形CEF=1且S三角形BDG=3,求S正方形DEFG. 在三角形ABC中,对边分别是a、b、c,若三角形ABC的面积为S,且S=c^2-(a+b)^2,求tanC/2的值 求二次函数两根距离公式应该有三个'一个跟韦达定理有关'一个跟戴尔塔有关'还有一个带个k这个k是什么意思'. 如图所示,三角形abc是边长为a的等边三角形,defg为正方形,求s正方形defg 直角三角形的所有性质?
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘