800px

响应式（⾃适应屏幕）

、css中@media写法

@mediaonlyscreenand(min-width:1024px)最⼩宽度1024

Safari版本5.1。7（7534.57.2）⽀持

chrome版本26.0.1410.64m⽀持

opera版本12.15⽀持

fireFox版本21.0⽀持

IE10版本10.0.92000.16580⽀持

@mediaonlyscreenand(max-width:1024px)最⼤宽度

同上都⽀持

@mediaonlyscreenand(min-width:800px)and(max-width:1024px)宽度⼤于800⼩于1024

Safari版本5.1。7（7534.57.2）b⽀持

chrome版本26.0.1410.64m⽀持

opera版本12.15不⽀持

fireFox版本21.0不⽀持

IE10版本10.0.92000.16580不⽀持

@mediascreenand(max-device-width:1366px)设备屏幕宽度⼩于1366

Safari版本5.1。7（7534.57.2）⽀持

chrome版本26.0.1410.64m⽀持

opera版本12.15不⽀持

fireFox版本21.0⽀持

IE10版本10.0.92000.16580⽀持

这种写法我们电脑测试的时候多数是不能出现效果的，应为需要设置我们设备的屏幕⼤⼩，我的电脑是1366*768的，所以设置成1366，

如果变成1024或其他的数字，是看不到效果的，（除⾮在调整屏幕分辨率）

@mediascreenand(min-device-width:1366px)设备屏幕⼤于1366

同上

例外：opera在⽤@mediascreenand(min-device-width:1366px)和@mediascreenand(max-device-width:1366px)的时候，有⼀个很

有趣的现象，我把分辨率调成1024*800的时候把最⼤宽度调成1366后他是可以⽤的，同理最⼩款款调成800也管⽤了，有些搞不懂了，如

果哪位⼤⽜知道，请指导⼀下

@media(max-width:1024px)

Safari版本5.1。7（7534.57.2）⽀持

chrome版本26.0.1410.64m⽀持

opera版本12.15⽀持

fireFox版本21.0⽀持

IE10版本10.0.92000.16580⽀持

@media(min-width:1024px)

Safari版本5.1。7（7534.57.2）⽀持

chrome版本26.0.1410.64m⽀持

opera版本12.15⽀持

fireFox版本21.0⽀持

IE10版本10.0.92000.16580⽀持

ResponsiveWebDesign）

随着3G的普及，越来越多的⼈使⽤⼿机上⽹。

移动设备正超过桌⾯设备，成为访问互联⽹的最常见终端。于是，⽹页设计师不得不⾯对⼀个难题：如何才能在不同⼤⼩的设备上呈现同样

的⽹页？

⼿机的屏幕⽐较⼩，宽度通常在600像素以下；PC的屏幕宽度，⼀般都在1000像素以上（⽬前主流宽度是1366×768），有的还达到了2000

像素。同样的内容，要在⼤⼩迥异的屏幕上，都呈现出满意的效果，并不是⼀件容易的事。

很多⽹站的解决⽅法，是为不同的设备提供不同的⽹页，⽐如专门提供⼀个mobile版本，或者iPhone/iPad版本。这样做固然保证了效果，

但是⽐较⿇烦，同时要维护好⼏个版本，⽽且如果⼀个⽹站有多个portal（⼊⼝），会⼤⼤增加架构设计的复杂度。

于是，很早就有⼈设想，能不能"⼀次设计，普遍适⽤"，让同⼀张⽹页⾃动适应不同⼤⼩的屏幕，根据屏幕宽度，⾃动调整布局

（layout）？

、"⾃适应⽹页设计"的概念

2010年，EthanMarcotte提出了（ResponsiveWebDesign）这个名词，指可以⾃动识别屏幕宽度、并做出相应调整的⽹页设计。

他制作了⼀个，⾥⾯是《福尔摩斯历险记》六个主⼈公的头像。如果屏幕宽度⼤于1300像素，则6张图⽚并排在⼀

如果屏幕宽度在600像素到1300像素之间，则6张图⽚分成两⾏。

如果屏幕宽度在400像素到600像素之间，则导航栏移到⽹页头部。

如果屏幕宽度在400像素以下，则6张图⽚分成三⾏。

、允许⽹页宽度⾃动调整

"⾃适应⽹页设计"到底是怎么做到的？其实并不难。

⾸先，在⽹页代码的头部，加⼊⼀⾏。

是⽹页默认的宽度和⾼度，上⾯这⾏代码的意思是，⽹页宽度默认等于屏幕宽度（width=device-width），原始缩放⽐例（initial-scale=1）

为1.0，即⽹页初始⼤⼩占屏幕⾯积的100%。

所有主流浏览器都⽀持这个设置，包括IE9。对于那些⽼式浏览器（主要是IE6、7、8），需要使⽤。

、不使⽤绝对宽度

由于⽹页会根据屏幕宽度调整布局，所以不能使⽤绝对宽度的布局，也不能使⽤具有绝对宽度的元素。这⼀条⾮常重要。

具体说，CSS代码不能指定像素宽度：

width:xxxpx;

只能指定百分⽐宽度：

width:xx%;

或者

width:auto;

、相对⼤⼩的字体

字体也不能使⽤绝对⼤⼩（px），⽽只能使⽤相对⼤⼩（em）。

body{

font:normal100%Helvetica,Arial,sans-rif;

}

上⾯的代码指定，字体⼤⼩是页⾯默认⼤⼩的100%，即16像素。

h1{

font-size:1.5em;

}

然后，h1的⼤⼩是默认⼤⼩的1.5倍，即24像素（24/16=1.5）。

small{

font-size:0.875em;

}

small元素的⼤⼩是默认⼤⼩的0.875倍，即14像素（14/16=0.875）。

、流动布局（fluidgrid）

"流动布局"·的含义是，各个区块的位置都是浮动的，不是固定不变的。

.main{

float:right;

width:70%;

}

.leftBar{

float:left;

width:25%;

}

float的好处是，如果宽度太⼩，放不下两个元素，后⾯的元素会⾃动滚动到前⾯元素的下⽅，不会在⽔平⽅向overflow（溢出），避免了⽔

平滚动条的出现。

另外，绝对定位（position:absolute）的使⽤，也要⾮常⼩⼼。

、选择加载CSS

"⾃适应⽹页设计"的核⼼，就是CSS3引⼊的模块。

它的意思就是，⾃动探测屏幕宽度，然后加载相应的CSS⽂件。

media="screenand(max-device-width:400px)"

href=""/>

上⾯的代码意思是，如果屏幕宽度⼩于400像素（max-device-width:400px），就加载⽂件。

media="screenand(min-width:400px)and(max-device-width:600px)"

href=""/>

如果屏幕宽度在400像素到600像素之间，则加载⽂件。

除了⽤html标签加载CSS⽂件，还可以在现有CSS⽂件中加载。

@importurl("")screenand(max-device-width:400px);

、CSS的@media规则

同⼀个CSS⽂件中，也可以根据不同的屏幕分辨率，选择应⽤不同的CSS规则。

@mediascreenand(max-device-width:400px){

.column{

float:none;

width:auto;

}

#sidebar{

display:none;

}

}

上⾯的代码意思是，如果屏幕宽度⼩于400像素，则column块取消浮动（float:none）、宽度⾃动调节（width:auto），sidebar块不显⽰

（display:none）。

、图⽚的⾃适应（fluidimage）

除了布局和⽂本，"⾃适应⽹页设计"还必须实现图⽚的。

这只要⼀⾏CSS代码：

img{max-width:100%;}

这⾏代码对于⼤多数嵌⼊⽹页的视频也有效，所以可以写成：

img,object{max-width:100%;}

⽼版本的IE不⽀持max-width，所以只好写成：

img{width:100%;}

此外，windows平台缩放图⽚时，可能出现图像失真现象。这时，可以尝试使⽤IE的：

img{-ms-interpolation-mode:bicubic;}

或者，EthanMarcotte的。

addLoadEvent(function(){

varimgs=mentById("content").getElementsByTagName("img");

e(imgs);

});

不过，有条件的话，最好还是根据不同⼤⼩的屏幕，加载不同分辨率的图⽚。有可以做到这⼀条，服务器端和客户端都可以实现。

、移动页⾯⾃适应⼿机屏幕宽度

⽹上关于这⽅⾯的⽂章有很多，重复的东西本⽂不再赘述，仅提供思路，并解释⼀些其他⽂章讲述模糊的地⽅。

、使⽤meta标签

这也是普遍使⽤的⽅法，理论上讲使⽤这个标签是可以适应所有尺⼨的屏幕的，但是各设备对该标签的解释⽅式及⽀持程度不同造成了不能

兼容所有浏览器或系统。

⾸先解释该标签的含义：

如果你完全不了解这个标签的使⽤需要先百度⼀下。

解释：content中的“width”这个width指的是什么宽度，我看过的⽂章对这个都没有解释的很清楚，有⼏个备选：虚拟窗⼝的宽度、⼿机屏幕

的宽度、还是页⾯的宽度等等？经试验这个指的是虚拟窗⼝的宽度。了解宽度之后，对后续的各种scale，就应该知道是谁与谁的⽐例，

是虚拟窗⼝宽度/页⾯宽度，这样就会有问题出现安卓设备尺⼨差异很⼤光主流的就有宽度为32等各种尺⼨⽽以上标签只

能⽀持⼀种尺⼨，当然有些浏览器会⾃动缩放使其适应屏幕，但这不是统⼀标准，正确的做法是⽤js动态⽣成此标签，当然，应该先获取屏

幕尺⼨。

对于此标签还有以下需要分享：

1)、ur-scalable=no就⼀定可以保证页⾯不可以缩放吗？NO，有些浏览器不吃这⼀套，还有⼀招就是minimum-scale=1.0,maximum-

scale=1.0最⼤与最⼩缩放⽐例都设为1.0就可以了。

2)、initial-scale=1.0初始缩放⽐例受ur-scalable控制吗？不⼀定，有些浏览器会将ur-scalable理解为⽤户⼿动缩放，如果ur-

scalable=no，initial-scale将⽆法⽣效。

3)、⼿机页⾯可以触摸移动，但是如果有需要禁⽌此操作，就是页⾯宽度等于屏幕宽度是页⾯正好适应屏幕才可以保证页⾯不能移动。

4)、如果页⾯是经过缩⼩适应屏幕宽度的，会出现⼀个问题，当⽂本框被激活（获取焦点）时，页⾯会放⼤⾄原来尺⼨。

以上是使⽤viewport标签的⼀些⼩体会，分享给⼤家。

、第⼆种⾃适应屏幕尺⼨的⽅法是将页⾯做成980宽度

在没有viewport标签的情况下，移动设备屏幕范围会显⽰页⾯980的宽度，如果页⾯⼤于980，则在屏幕范围内显⽰页⾯⼀部分，如果页⾯⼩

于980，则页⾯居中两侧显⽰空⽩，那么你猜，如果页⾯宽度等于980会出现什么情况呢？

、百分⽐法

⾸先应明确⼀个概年，CSS中的百分⽐中的百指的是什么，我告诉你指的是⽗元素，所有百分⽐都是这样的。⼦元素宽度50%，那么⽗元素

的宽度就是百，⼦元素的padding-left：50%，⽗元素的宽度是百，⼦元素的margin-top:20%，那么⽗元素的⾼是百。所以body默认宽度是

屏幕宽度（PC中指的是浏览器宽度）⼦孙元素按百分⽐定位（或指定尺⼨）就可以了，这只适合布局简单的页⾯，复杂的页⾯实现很困

难。

、使⽤css3单位rem

有⼈这样解释rem，root-em，就是根部的em，想必em⼤家都懂的，那么rem就是将根节点html的font-size的值作为整个页⾯的基准尺⼨，默

认html的font-size是16px，即1rem=16px，如果某div宽度为32px你可以设为2rem。当我们把html的font-size设为20px时，1rem=20px，那

么32px=1.6rem了。到这⾥我们也就了解了rem的⽤法了，那么怎么⽤rem来实现不同尺⼨屏幕的⾃适应呢？在页⾯载⼊开始时⾸先判断

window的宽度（是window的宽度($(window).width())，不是屏幕分辩率的宽度（），两者的差别请⾃⾏查阅），假设宽度为

W，⼀个div在宽度为640px的设计稿的下的宽度为dW1，这样如果html的font-size为100px，那么这个div的宽度⽤rem表⽰是多少呢？计

算：div宽度dW2=dW1/100,px与rem之间很好换算，除以100就可以，这是假定屏幕宽度为640的，⽽不同宽度的屏幕怎么处理，为了能保

证换算容易那就要为html设置⼀个合适的font-size，计算：100/640=fontSize/W,fontSize=W/640*100=W/6.4;

解释⼀下为什么把100作为⼀个缩放⽐例，⽤10或1不是更⽅便吗，这是因为⼤多数浏览器font-size的最⼩值为12px，所以只能⽤100了。

、媒体查询

媒体查询也是css3的⽅法，我们要解决的问题是适应⼿机屏幕，这个媒体查询正是为解决这个问题⽽⽣，媒体查询的功能就是为不同的媒体

设置不同的css样式，这⾥的“媒体”包括页⾯尺⼨，设备屏幕尺⼨等，⽐如我们要为宽度⼩于480px的页⾯中的class="icon"的元素设置样

式，可以这样写，@mediascreenand(max-width=480px){.icon{somestyles}};这⾥仅介绍这种思路，关于媒体查询的详细⽤法请参阅css

⼿册。

综上，⾄今，我没有找到⼀种完全适应各种屏幕的⽅法，只能根据页⾯特点选择不同的⽅法。

通过CSS3MediaQuery实现响应布局

讲到响应式布局，相信⼤家都有⼀定的了解，随着移动互联⽹的盛⾏，为解决如今各式各样的浏览器分辨率以及不同移动设备的显⽰效果，

设计师提出了响应式布局的设计⽅案。今天就和⼤家来讲讲响应式布局这件⼩事，包含什么是响应式布局、响应式布局的优点和缺点以及响

应式布局该怎么设计（通过CSS3MediaQuery实现响应布局）。

响应式布局是EthanMarcotte在2010年5⽉份提出的⼀个概念，简⽽⾔之，就是⼀个⽹站能够兼容多个终端——⽽不是为每个终端做⼀个特

定的版本。这个概念是为解决移动互联⽹浏览⽽诞⽣的。

响应式布局可以为不同终端的⽤户提供更加舒适的界⾯和更好的⽤户体验，⽽且随着⽬前⼤屏幕移动设备的普及，⽤⼤势所趋来形容也

不为过。随着越来越多的设计师采⽤这个技术，我们不仅看到很多的创新，还看到了⼀些成形的模式。

优点：

⾯对不同分辨率设备灵活性强

能够快捷解决多设备显⽰适应问题

缺点：

兼容各种设备⼯作量⼤，效率低下

代码累赘，会出现隐藏⽆⽤的元素，加载时间加长

其实这是⼀种折衷性质的设计解决⽅案，多⽅⾯因素影响⽽达不到最佳效果

⼀定程度上改变了⽹站原有的布局结构，会出现⽤户混淆的情况

我们在上⾯了解了什么是响应式布局，那在我们的实际项⽬中应该怎么去设计呢？在以往我们设计⽹站的时候都会受到不同浏览器的兼

容性的困扰，现在还要来个不同尺⼨设备，我们该怎么淡定下来呢？有需求就会有解决⽅案，呵呵，说到响应式布局，就不得不提起CSS3

中的MediaQuery（媒介查询），这可是个好东西，易⽤、强⼤、快捷……MediaQuery是制作响应式布局的⼀个利器，使⽤这个⼯具，我

们可以⾮常⽅便快捷的制造出各种丰富的实⽤性强的界⾯。接下来就⼀起来深⼊的了解MediaQuery。

1、CSS中的MediaQuery（媒介查询）是什么？

通过不同的媒体类型和条件定义样式表规则。媒体查询让CSS可以更精确作⽤于不同的媒体类型和同⼀媒体的不同条件。媒体查询的⼤

部分媒体特性都接受min和max⽤于表达”⼤于或等于”和”⼩与或等于”。如：width会有min-width和max-width媒体查询可以被⽤在CSS中

的@media和@import规则上，也可以被⽤在HTML和XML中。通过这个标签属性，我们可以很⽅便的在不同的设备下实现丰富的界⾯，特

别是移动设备，将会运⽤更加的⼴泛。

2、mediaquery能够获取哪些值？

设备的宽和⾼device-width，device-heigth显⽰屏幕/触觉设备。

渲染窗⼝的宽和⾼width，heigth显⽰屏幕/触觉设备。

设备的⼿持⽅向，横向还是竖向orientation（portrait|lanscape）和打印机等。

画⾯⽐例aspect-ratio点阵打印机等。

设备⽐例device-aspect-ratio-点阵打印机等。

对象颜⾊或颜⾊列表color，color-index显⽰屏幕。

设备的分辨率resolution。

3、语法结构及⽤法

@media设备名only（选取条件）not（选取条件）and（设备选取条件），设备⼆{sRules}

⽰例⼀：在link中使⽤@media：

width：480px）”href=“”/>

上⾯使⽤中only可省略，限定于计算机显⽰器，第⼀个条件max-width是指渲染界⾯最⼤宽度，第⼆个条件max-device-width是指设备最

⼤宽度。

⽰例⼆：在样式表中内嵌@media：

@media（min-device-width:1024px）and（max-width:989px），screenand（max-device-width:480px），（max-device-

width:480px）and（orientation:landscape），（min-device-width:480px）and（max-device-

width:1024px）and（orientation:portrait）{srules}

在⽰例⼆中，设置了电脑显⽰器分辨率（宽度）⼤于或等于1024px（并且最⼤可见宽度为989px）；屏宽在480px及其以下⼿持设备；

屏宽在480px以及横向（即480尺⼨平⾏于地⾯）放置的⼿持设备；屏宽⼤于或等于480px⼩于1024px以及垂直放置设备的css样式。

从上⾯的例⼦可以看出，字符间以空格相连，选取条件包含在⼩括号内，srules为兼容设置的样式表，包含在中括号⾥⾯。only（限定

某种设备，可省略），and（逻辑与），not（排除某种设备）为逻辑关键字，多种设备⽤逗号分隔，这⼀点继承了css基本语法。

4、可⽤设备名参数：

5、逻辑关键字：

6、可⽤设备名参数：

7、测试MediaQueries

最后，我们需要对我们刚刚设计的MediaQueries进⾏测试，想要在不同设备上测试MediaQueries的效果，可以使⽤⼀个浏览⼯具来检

验不同尺⼨屏幕下的显⽰效果，在这⾥为⼤家介绍⼀个不错的在线⼯具–Responsivator，它可以模拟iPhone等各种不同设备，并且还可以

⾃定义不同尺⼨屏幕的显⽰效果，只需要输⼊⼀个url甚⾄是本地的⼀个url（如），就可以看到⽹站在不同尺⼨屏幕下的显⽰效果。

8、通过MediaQueries实现响应式布局设计

好了，我们明⽩了什么是MediaQuery，那我们⼀起来运⽤到响应式布局的设计项⽬中去。设计思路很简单，⾸先先定义在标准浏览器下

的固定宽度（假如标准浏览器的分辨率为1024px，那么我们设置宽为980px），然后⽤MediaQuery来监测浏览器的尺⼨变化，当浏览器的

分辨率⼩于1024px的时候，则通过MediaQuery预设的样式表来将页⾯的宽度设置为百分⽐显⽰，这样⼦页⾯的结构元素就会根据浏览器的

的尺⼨来进⾏相对应的调整。同理，当浏览器的可视区域改变到某个值（假如为650px）的时候，页⾯的结构元素根据MediaQuery预设的

层叠样式表来进⾏相对应的调整。看看我们的例⼦：

/*当浏览器的可视区域⼩于980px*/

@mediascreenand（max-width：980px）{

#wrap{width：90%;margin:0auto;}

#content{width：60%;padding：5%;}

#sidebar{width：30%;}

#footer{padding：8%5%;margin-bottom：10px;}

}

/*当浏览器的可视区域⼩于650px*/

@mediascreenand（max-width：650px）{

#header{height：auto;}

#archform{position：absolute;top：5px;right：0;}

#content{width：auto;float：none;margin：20px0;}

#sidebar{width：100%;float：none;margin：0;}

}

通过上⾯我们就可以监测浏览器的可视区域变化的是时候我们的页⾯结构元素也会相对应的变化，当然你可以再多设置⼏个尺⼨的监测

层叠样式表，这样⼦就可以根据不同尺⼨设备来进⾏响应式的布局。为了更好的显⽰效果，我们往往还要格式化⼀些CSS属性的初始值：

/*禁⽤iPhone中Safari的字号⾃动调整*/

html{

-webkit-text-size-adjust：none;

}

/*设置HTML5元素为块*/

article，aside，details，figcaption，figure，footer，header，hgroup，menu，nav，ction{

display：block;

}

/*设置图⽚视频等⾃适应调整*/

img{

max-width：100%;

height：auto;

width：auto9;/*ie8*/

}

.videoembed，.videoobject，.videoiframe{

width：100%;

height：auto;

}

最后要注意的是在页⾯的头部之间加上下⾯这句∶

metaviewport这个属性是在移动设备上设置原始⼤⼩显⽰和是否缩放的声明。

参数设置∶

width–viewport的宽度

height–viewport的⾼度

initial-scale–初始的缩放⽐例

minimum-scale–允许⽤户缩放到的最⼩⽐例

maximum-scale–允许⽤户缩放到的最⼤⽐例

ur-scalable–⽤户是否可以⼿动缩放

最后对于在IE浏览器中不⽀持mediaquery的情况，我们可以使⽤MediaQueryJavaScript来解决，只需要在页⾯头部引⽤css3-

即可。⽰例：

<！--［ifltIE9］>

<！［endif］-->

9.⼀个普通的⾃适应显⽰的三栏⽹页，当你⽤不同的终端来查看这个页⾯的时候，他会根据⼏种终端来显⽰不同的样式，在电脑上是三列，

在pad上应该也是三列，在⼤屏⼿机上是三⾏，在屏幕⼩于320的⼿机上只显⽰主要内容，隐藏掉了次要元素。（这个demo也可以⽤拖动浏

览器⼤⼩的⽅式测试。）

这就是⼀个最简单的响应式布局的页⾯。我们就从这个例⼦⾥认识下mediaquery属性吧。

@mediascreenand(min-width:320px)and(max-width:479px)

就从这个条件语句开始介绍，media属性后⾯跟着的是⼀个screen的媒体类型（上⾯说过的⼗种媒体类型之⼀）。然后⽤and关键字来连

接条件（其他关键字还有not，only，看字⾯⼤家能理解，就不多说。），然后括号⾥就是⼀个媒体查询语句，稍微懂点css的同学都能看

懂，这个条件语句意思是在⼤于320⼩于479的分辨率下所激活的样式表。

这个语句，就是响应式布局的基础应⽤了。在判断终端分辨率⼤⼩之后，赋予不同的样式进去，就像我们的例⼦⾥

@mediascreenand(max-width:320px){

body{...}

}

@mediascreenand(min-width:800px)and(max-width:1024px){

body{...}

}

⾄于要判断多少种分辨率，完全取决于你产品的需求，常见的分辨率有⼿机，平板（注意这些终端是存在横屏竖屏区别的,这个下⼀篇⾥

提），桌⾯显⽰器。⾃⼰为⾃⼰所⾯对的终端定制样式。

⼀般⼤于960的显⽰器都可以⽤默认样式⽽不必在媒体查询⾥判断了。有⼀种情况除外，就是⾼像素⽐的终端，⽐如iphone4以上的retina

屏，⼀个iphone5的⼩⼩的屏幕（iphone的屏幕是真⼩啊），他的分辨率竟然达到了1136*640，如何让放⼤了两倍的屏幕显⽰依然清晰？

在⾯对这种分辨率精细的终端，我们有另外⼀个条件查询语句device-pixel-ratio。

⽐如例⼦⾥的

@mediaonlyscreenand(-moz-min-device-pixel-ratio:2),onlyscreenand(-o-min-device-pixel-ratio:2/1),onlyscreenand(-webkit-min-

device-pixel-ratio:2),onlyscreenand(min-device-pixel-ratio:2)

就是判断终端的像素⽐是2的话，所渲染的样式。iphone4以上像素⽐是2，⾼分辨率Andriod设备像素⽐是1.5，例⼦⾥只有像素⽐为2的查

询，1.5的或者其他⽐例⽅法⼀样，前⾯⽤的是⼏种浏览器的私有属性，最后⼀种是通⽤属性，

@mediaonlyscreenand(-moz-min-device-pixel-ratio:2),onlyscreenand(-o-min-device-pixel-ratio:2/1),onlyscreenand(-webkit-min-

device-pixel-ratio:2),onlyscreenand(min-device-pixel-ratio:2)

等于

@mediaonlyscreenand(min-device-pixel-ratio:2)

为了⼀些版本的兼容性，不得已写的长了。

body{

font-size:24px;

}

.box2{

background:url(d/)#ccc;

background-size:50%;

}

在像素⽐为2的终端⾥这样写的⽬的，就是让他显⽰的更容易识别，⼀般来说显⽰⼀张1px的背景图⽚，我们要准备⼀张2px的，然后再

background-size:50%这样。1.5像素⽐同例。

⽐如上⾯的demo，如果你⽤iphone4以上的苹果⼿机来看，中间的背景图⽚应该是显⽰“2.0像素⽐”。

这⾥也暴露了响应式⼀个很⼤的缺点：需要多做若⼲背景图（作为内容显⽰的图⽚暂时⽆视，弹性图⽚与弹性字体，下次单独写⼀篇介绍博

⽂介绍）。

对于mediaquery的兼容性，我想不是很重要，因为很少有终端⾃带IE9以下的浏览器。基本都是⾼级浏览器。如果特殊需要，可以下载⼀个

兼容的JS⽂件

以条件注释的⽅式加在⽂件⾥。

ie兼容响应式布局的实现总结

虽然说响应式设计的理想状态是，需对pc/移动各种终端进⾏响应；但是现实是⾼分辨率的pc端与⼿机终端屏幕相差太⼤，像电商这样有⼤

量图⽚和⽂字信息的同时排版要求精准的页⾯，设计⼀个同时适应⾼分辨率pc⼜适合⼩尺⼨的⼿机终端是挑战；同时⾼分辨率下pc页⾯信息

量巨⼤，对于⼿机端⽤户是否需要，也许会造成带宽浪费;再者⼿机终端和pc终端的⽤户操作习惯也相差甚⼤，这种多图多信息量要求精准

的页⾯，设计出来恐怕会是2个完全不同的版本，也许各⾃维护更⽅便。由于业务形态原因，随着⽤户分辨率的提⾼，1024×768已不再是主

流，宽屏⽤户⽐例越来越⼤，因此我们的响应式考虑如何充分利⽤PC⽤户设备上更多空间⽽设计。下图为淘宝⽤户的屏幕分辨率和浏览器

⽐例，鉴于ie8-浏览器⽬前占⽐约70%，mediaquery的ie8-兼容迫于现实还是要做，泪……

简介

有2种引⼊⽅式：

标签⽅式

"stylesheet"type="text/css"media="screen"href="">

"stylesheet"type="text/css"media="print"href="">

⽅式

@mediascreen{

*{font-family:sans-rif}

}

媒体类型有很多种：‘aural’,‘braille’,‘handheld’,‘print’,‘projection’,‘screen’,‘tty’,‘tv’、‘embosd’、‘speech’、’3d-glass’，但最常⽤的

是screen和print,对于前端们来讲最常⽤的应该只有screen了。应⽤于所有媒体类型可以⽤all，省略不写默认就是all。mediaquery⽀持很多

表达式，常⽤的如下，：

@mediaalland(min-width:400px)and(max-width:700px){}

@mediaalland(orientation:portrait){}

@mediaand(min-device-width:800px){}

利⽤mediaquery可以轻松实现不同屏幕宽度时切换不同的页⾯布局，但是很不幸ie8及以下都还不⽀持mediaquery，于是开始了下⾯

的mediaquery兼容之旅……

⽬前实现mediaqueryie兼容的库⽐较成熟的有和；，压缩后1k，只实现了mediaquery中最常⽤的min-widthmax-width的兼

容；css3-mediaqueries-js基本实现了所有css3规范中的mediaquery特性的兼容，所以导致压缩有16k，测试反馈其性能远低

于;不过确实⼀淘⾸页2次响应式设计均只需⽤到max-width和min-width，和也均推荐使⽤,下⾯具体看看它们的实现吧

源码分析

使⽤⽅式

1.在css中正常⽤min/max-widthmediaqueries

@mediascreenand(min-width:480px){

...stylesfor480pxandupgohere

}

2.引⼊，但要在css的后⾯（越早引⼊越好，在ie下⾯看到页⾯闪屏的概率就越低，因为最初css会先渲染出来，如

果加载得很后⾯，这时重新根据mediaquery解析出来的css会再改变⼀次页⾯的布局等，所以看起来有闪屏的现象）

实现思路

1.把head中所有的css路径取出来放⼊数组

2.然后遍历数组⼀个个发ajax请求

回调后仅分析respon中的mediaquery的min-width和max-width语法，分析出viewport变化区间对应相应的css块

4.页⾯初始化时和时，根据当前viewport使⽤相应的css块。

edia=edia||(function(doc,undefined){

varbool,

docElem=ntElement,

refNode=lementChild||hild,

//fakeBodyrequiredfor

fakeBody=Element_x('body'),

div=Element_x('div');

='mq-test-1';

t="position:absolute;top:-100em";

ound="none";

Child(div);

returnfunction(q){

TML='';

Before(fakeBody,refNode);

bool=Width==42;

Child(fakeBody);

return{matches:bool,media:q};

};

})(document);

//检测是否⽀持mediaquery,检测css是否有效的⽅法都差不多，创建⼀个元素应⽤该css后检测元素宽度，然后清除该元素。

.......

if(!!href&&isCSS&&!pardSheets[href]){

//lectivizrexposcssthroughtherawCssTextexpando

if(heet&&Text){

//lectivizr的作⽤是CSS3lectorsforIE；约定将原csstext放在styleSheet的link上的扩展属性rawCssText上；这⾥如果联

⽤lectivizr可以少次ajax请求

translate(Text,href,media);

pardSheets[href]=true;

}el{

if((!/^([a-zA-Z:]*)/.test(href)&&!ba)

||e(RegExp.$1,"").split("/")[0]===){

({

href:href,

media:media

});

}

}

}

.......

其余的代码就是ajax实现和translatemediaquery的max-widthmin-width的逻辑了；可以看出这⾥必须依赖ajax请求css路径才能得到css⽂

件中的mediaquery的内容，那ajax的跨域问题就要解决了；由于我们的静态资源都是要放cdn的，也给出了跨域⽅法，即引⼊代

理页⾯。

//把cross-domain/放到cdn上

//把cross-domain/放到当前域服务器上

"/path/to/"id="respond-redirect"rel="respond-redirect"/>

"/path/to/">

这⾥ajax跨域实现是通过代理页⾯将获取到的css，再通过通信实现；如在中

functioncheckFrameName(){

varcssText;

try{

cssText=;

varnow=newDate().getTime(),uTime=now-initTime;

alert('获取css耗时:'+uTime+'ms');

}

catch(e){}

if(cssText){

……//销毁之前⽤于通信的iframe,后续回调callback

callback(cssText);

}

el{

eout(checkFrameName,100);

}

}

eout(checkFrameName,500);//500ms后确认内部iframe的name值是否传递过来，后续再更新当前viewport该⽤的css。

因为实现跨域代理的问题，初始化页⾯时应⽤上全部css耗时较长，以下光测试从开始执⾏该js⽂件到css取回调⽤之前的耗时为500ms-

515ms之间（每次刷新结果不⼀样），ie8下测试结果如下

测试结果发现，刷新页⾯后会有明显的闪屏（以该测试demo为例，⼀开始页⾯背景是⿊⾊的，这是默认css中的，跨域js执⾏完成后分析

出mediaquery中的该viewport尺⼨下应该应⽤red的背景，所以⼜变成红⾊），间隔时间为500ms以上。所以体验不是很好，⽽且该场景

中ajax跨域⽬前已经没有更好的实现⽅式，500ms间隔的闪屏避免不了。

同时因为是ajax请求css,所以会因为响应式⽽额外产⽣⼀个请求，好在之前css请求过⼀遍，这次ajax请求是读取浏览器缓存中的，如下图

中fiddler的检测结果中的第三个请求和第六个请求：

总结

优点：压缩后仅1k,不跨域时性能ok，只需引⼊通⽤易⽤

缺点：仅⽀持mediaquery的min-width和max-width（⽤于响应式够⽤）；⽀持跨域，虽然配置有点⿇烦，实现跨域代价⾼⽽且有闪屏体验

⽋佳。

css3-mediaqueries-js源码分析

官⽅⽂档和demo都没有，相对于3-mediaqueries-js⽀持⼏乎所有的mediaquery的语法，访问

实现逻辑

其实现逻辑和差不多，只是更加⽀持的mediaquery更加全⾯，同时⽀持内联style，⽀持各种宽度单

位(em|ex|px|in|cm|mm|pt|pc),但是这⾥的初始化是在domready后执⾏，为了让⽤户感觉不出页⾯有闪屏（之前应⽤初始化样式然后js提

取mediaquery中的样式再覆盖⼀遍）现象，这⾥的实现是先将html移出可视区域外，等解析完mediaquery后再重置回来，但实际⽬测感觉

稍有闪屏（当然这⾥的测试是测试body背景⾊，移出可视区域外不管⽤，当然绝⼤部分响应式场景是适⽤的），实现如下：

//preventjumpingoflayoutbyhidingeverythingbeforepainting先将html移出可视区域外

vardocEl=ntElement;

Left='-32767px';

//makesureitcomesbackafterawhile异常处理，万⼀获取mediaquerycss失败，重置回来

tTimeout(function(){

Top='';

},20000);

……

//returnvisibilityaftermediaqueriesaretested⽣效后重新可见

tener('cssMediaQueriesTested',function(){

//forcerepaintinIEbychangingwidth

if(){

='1px';

}

tTimeout(function(){

='';//undowidth

Left='';//undohide

varnow=newDate().getTime();

varuTime=now-initTime;

alert('mediaquery⽣效时间:'+uTime+'ms');

},0);

//removethislistenertopreventfollowingexecution

Listener('cssMediaQueriesTested',);

});

其余实现和基本⼀致，也需要使⽤ajax，所以本⾝不⽀持跨域，当然⾮要⽀持跨域也可以，也可以

像⼀样使⽤代理页⾯跨域即可，但也会出现闪屏的现象。还是先看看不跨域情况下，⼤多数⼈为什么选择，主要原因

还是完美⽀持的mediaquery特性导致压缩后16K，下载和执⾏时间都逊于，下⾯是同域下在ie8的测试结果（耗

时140ms⽽仅15ms）：

css3-mediaqueries-js总结

优点：1、基本⽀持所有css3中的mediaquery语法

缺点：1、不⽀持跨域（如cdn），就算⽀持了跨域也存在闪屏现象；2、和对⽐性能较差

全局切换class

因为css/js需要放到cdn上⾯，需要跨域，css3-mediaqueries-js不⽀持跨域，⽀持跨域但是实现跨域后性能较差，有闪屏体验也

差，⽽且配置⿇烦，不⽅便各个业务通⽤。对⽐和css3-mediaqueries-js可知，实现响应式应⽤min-width和max-width⾜矣；同时

模拟mediaquery的效果只需要在2个关键时间点根据viewport切换css（初始化页⾯时和）即可。所以可以选择切换csslink，

可以动态切换css块,也可以切换class

切换csslink（优点：逻辑清晰；缺点：增加请求数，维护⿇烦，如修改⼀个模块涉及到3个尺⼨的响应,⾄少需要改3个⽂件）

"stylesheet"type="text/css"media="screenand(max-width:990px)"href="&uuot;>

stylesheet"type="text/css"media="screenand(max-width:1200px)"href="">

切换内联css块(和css3-mediaqueries-js就是通过js分析出mediaquery然后⾃动根据当前viewport切换css块，这个理想环境下是

最好的，⾃动分析只管写mediaquery，但是依赖ajax获取css内容，跨域实现成本⾼体验也不好)

全局切换class(特别是初始化页⾯时最好在页⾯内容未开始渲染之前切换class，不然会出现像在宽屏时刷新效果，刷新时内容由中间向外

偏），特定viewport⽤特殊全局class标记，响应式样式继承在该class下，实现⼤致如下：

实现⽅式

@mediascreenand(min-width:990px){

.content{

width:990px;

color:red;

}

}

@mediascreenand(min-width:1200px){

.content{

width:1200px;

color:green;

}

}

.t{

width:990px;

color:red;

}

.t{

width:1200px;

color:green;

}

"w990">

"content">content

全局切换class这种⽅式维护也是个问题，⾸先是js分散2处，body最上⽅切换全局class，domready时时切换class,同时响应

式尺⼨增加时，需要改变js判断条件；再看css的维护，mediaquery⼀份，加全局class⼀份相同的，维护需要同时修改2次，初期media

query⼏⼗⾏也能接受，但是后来改版mediaquery⼏百⾏，这样维护成本就⼤⼤增加了，全局class和mediaquerycopy相同的代码引

⼊less解决，使⽤⽅法如下：

#channels{

.w1200(){

.etao-channels{

padding:170px0030px;

li{

margin-right:25px;

}

}

}

.w990(){

.etao-channels{

padding:25px0015px;

li{

margin-right:8px;

}

}

.w750(){

.etao-channels{

padding:5px005px;

li{

margin-right:5px;

}

a{

color:#333;

}

}

}

}

//这样只需维护上⾯⼀处代码即可

#channels>.w1200;

@media(max-width:1119px){

#channels>.w990;

}

@media(max-width:989px){

#channels>.w750;

}

.w990{

#channels>.w990;

}

.w750{

#channels>.w750;

}

⽬前采⽤以上⽅法维护，⽀持1200px、990px、750px三个尺⼨的响应，不得不承认维护成本还是偏⾼，欢迎各种改进建议,