一 、 css中@media写法

@media only screen and (min-width: 1024px)最小宽度1024

Safari 版本5.1。7（7534.57.2）支持
chrome 版本26.0.1410.64  m 支持
opera 版本12.15 支持
fireFox 版本21.0 支持
IE10 版本10.0.92000.16580  支持

@media only screen and (max-width: 1024px)最大宽度

同上都支持

@media only screen and(min-width:800px) and (max-width:1024px)宽度大于800 小于1024

Safari 版本5.1。7（7534.57.2）b支持
chrome 版本26.0.1410.64  m 支持
opera 版本12.15 不支持
fireFox 版本21.0 不支持
IE10 版本10.0.92000.16580  不支持

@media screen and (max-device-width: 1366px)设备屏幕宽度小于1366

Safari 版本5.1。7（7534.57.2）支持
chrome 版本26.0.1410.64  m 支持
opera 版本12.15 不支持
fireFox 版本21.0 支持
IE10 版本10.0.92000.16580  支持

这种写法我们电脑测试的时候多数是不能出现效果的，应为需要设置我们设备的屏幕大小，我的电脑是1366*768的，所以设置成1366，如果变成1024或其他的数字，是看不到效果的，（除非在调整屏幕分辨率）

@media screen and (min-device-width: 1366px) 设备屏幕大于1366

同上

例外：opera 在用@media screen and (min-device-width: 1366px)和@media screen and (max-device-width: 1366px)的时候，有一个很有趣的现象，我把分辨率调成1024*800的时候把最大宽度调成1366后他是可以用的，同理最小款款调成800也管用了，有些搞不懂了，如果哪位大牛知道，请指导一下！！！

@media(max-width:1024px)

Safari 版本5.1。7（7534.57.2）支持
chrome 版本26.0.1410.64  m 支持
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.64  m 支持
opera 版本12.15 支持
fireFox 版本21.0 支持
IE10 版本10.0.92000.16580  支持

二、自适应网页设计（Responsive Web Design）

随着3G的普及，越来越多的人使用手机上网。

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

手机的屏幕比较小，宽度通常在600像素以下；PC的屏幕宽度，一般都在1000像素以上（目前主流宽度是1366×768），有的还达到了2000像素。同样的内容，要在大小迥异的屏幕上，都呈现出满意的效果，并不是一件容易的事。

很多网站的解决方法，是为不同的设备提供不同的网页，比如专门提供一个mobile版本，或者iPhone / iPad版本。这样做固然保证了效果，但是比较麻烦，同时要维护好几个版本，而且如果一个网站有多个portal（入口），会大大增加架构设计的复杂度。

于是，很早就有人设想，能不能"一次设计，普遍适用"，让同一张网页自动适应不同大小的屏幕，根据屏幕宽度，自动调整布局（layout）？

1、"自适应网页设计"的概念

2010年，Ethan Marcotte提出了"自适应网页设计"（Responsive Web Design）这个名词，指可以自动识别屏幕宽度、并做出相应调整的网页设计。

他制作了一个范例，里面是《福尔摩斯历险记》六个主人公的头像。如果屏幕宽度大于1300像素，则6张图片并排在一

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

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

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

2、允许网页宽度自动调整

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

首先，在网页代码的头部，加入一行viewport元标签。

　　<meta name="viewport" content="width=device-width, initial-scale=1" />

viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。

所有主流浏览器都支持这个设置，包括IE9。对于那些老式浏览器（主要是IE6、7、8），需要使用css3-mediaqueries.js。

　　<!--[if lt IE 9]>
　　　　<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
　　<![endif]-->

3、不使用绝对宽度

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

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

　　width:xxx px;

只能指定百分比宽度：

　　width: xx%;

或者

　　width:auto;

4、相对大小的字体

字体也不能使用绝对大小（px），而只能使用相对大小（em）。

　　body {
　　　　font: normal 100% Helvetica, Arial, sans-serif;
　　}

上面的代码指定，字体大小是页面默认大小的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）。

5、流动布局（fluid grid）

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

　　.main {
　　　　float: right;
　　　　width: 70%; 
　　}

　　.leftBar {
　　　　float: left;
　　　　width: 25%;
　　}

float的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow（溢出），避免了水平滚动条的出现。

另外，绝对定位（position: absolute）的使用，也要非常小心。

6、选择加载CSS

"自适应网页设计"的核心，就是CSS3引入的Media Query模块。

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

　　<link rel="stylesheet" type="text/css"
　　　　media="screen and (max-device-width: 400px)"
　　　　href="tinyScreen.css" />

上面的代码意思是，如果屏幕宽度小于400像素（max-device-width: 400px），就加载tinyScreen.css文件。

　　<link rel="stylesheet" type="text/css"
　　　　media="screen and (min-width: 400px) and (max-device-width: 600px)"
　　　　href="smallScreen.css" />

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

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

　　@import url("tinyScreen.css") screen and (max-device-width: 400px);

7、CSS的@media规则

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

　　@media screen and (max-device-width: 400px) {

　　　　.column {
　　　　　　float: none;
　　　　　　width:auto;
　　　　}

　　　　#sidebar {
　　　　　　display:none;
　　　　}

　　}

上面的代码意思是，如果屏幕宽度小于400像素，则column块取消浮动（float:none）、宽度自动调节（width:auto），sidebar块不显示（display:none）。

8、图片的自适应（fluid image）

除了布局和文本，"自适应网页设计"还必须实现图片的自动缩放。

这只要一行CSS代码：

　　img { max-width: 100%;}

这行代码对于大多数嵌入网页的视频也有效，所以可以写成：

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

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

　　img { width: 100%; }

此外，windows平台缩放图片时，可能出现图像失真现象。这时，可以尝试使用IE的专有命令：

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

或者，Ethan Marcotte的imgSizer.js。

　　addLoadEvent(function() {

　　　　var imgs = document.getElementById("content").getElementsByTagName("img");

　　　　imgSizer.collate(imgs);

　　});

不过，有条件的话，最好还是根据不同大小的屏幕，加载不同分辨率的图片。有很多方法可以做到这一条，服务器端和客户端都可以实现。

三 、移动页面自适应手机屏幕宽度

网上关于这方面的文章有很多，重复的东西本文不再赘述，仅提供思路，并解释一些其他文章讲述模糊的地方。

1、使用meta标签

这也是普遍使用的方法，理论上讲使用这个标签是可以适应所有尺寸的屏幕的，但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统。

首先解释该标签的含义：

<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

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

解释：content中的“width” 这个width指的是什么宽度，我看过的文章对这个都没有解释的很清楚，有几个备选：虚拟窗口的宽度、手机屏幕的宽度、还是页面的宽度等等？经试验这个指的是虚拟窗口的宽度。了解宽度之后，对后续的各种scale，就应该知道是谁与谁的比例，是 虚拟窗口宽度 / 页面宽度，这样就会有问题出现安卓设备尺寸差异很大光主流的就有宽度为 320  480720  1080 等各种尺寸而以上标签只能支持一种尺寸，当然有些浏览器会自动缩放使其适应屏幕，但这不是统一标准，正确的做法是用js动态生成此标签，当然，应该先获取屏幕尺寸。

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

1)、user-scalable=no就一定可以保证页面不可以缩放吗？NO，有些浏览器不吃这一套，还有一招就是minimum-scale=1.0, maximum-scale=1.0 最大与最小缩放比例都设为1.0就可以了。

2)、initial-scale=1.0   初始缩放比例受user-scalable控制吗？不一定，有些浏览器会将user-scalable理解为用户手动缩放，如果user-scalable=no，initial-scale将无法生效。

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

4)、如果页面是经过缩小适应屏幕宽度的，会出现一个问题，当文本框被激活（获取焦点）时，页面会放大至原来尺寸。

以上是使用viewport标签的一些小体会，分享给大家。

2、第二种自适应屏幕尺寸的方法是将页面做成980宽度

在没有viewport标签的情况下，移动设备屏幕范围会显示页面980的宽度，如果页面大于980，则在屏幕范围内显示页面一部分，如果页面小于980，则页面居中两侧显示空白，那么你猜，如果页面宽度等于980会出现什么情况呢？

3、百分比法

首先应明确一个概年，CSS中的百分比中的百指的是什么，我告诉你指的是父元素，所有百分比都是这样的。子元素宽度50%，那么父元素的宽度就是百，子元素的padding-left：50%，父元素的宽度是百，子元素的margin-top:20%，那么父元素的高是百。所以body默认宽度是屏幕宽度（PC中指的是浏览器宽度）子孙元素按百分比定位（或指定尺寸）就可以了，这只适合布局简单的页面，复杂的页面实现很困难。

4、使用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())，不是屏幕分辩率的宽度（screen.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了。

5、媒体查询

媒体查询也是css3的方法，我们要解决的问题是适应手机屏幕，这个媒体查询正是为解决这个问题而生，媒体查询的功能就是为不同的媒体设置不同的css样式，这里的“媒体”包括页面尺寸，设备屏幕尺寸等，比如我们要为宽度小于480px的页面中的class="icon"的元素设置样式，可以这样写，@media screen and (max-width=480px) {.icon{ some styles }};这里仅介绍这种思路，关于媒体查询的详细用法请参阅css手册。

综上，至今，我没有找到一种完全适应各种屏幕的方法，只能根据页面特点选择不同的方法。

四， 通 过CSS3 Media Query实现响应布局

讲到响应式布局， 相信大家都有一定的了解，随着移动互联网的盛行，为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果，设计师提出了响应式布局的设计方案。今天就和大家来讲讲响应式布局这件小事，包含什么是响应式布局、响应式布局的优点和缺点以及响应式布局该怎么设计（通过CSS3 Media Query实现响应布局）。

一、什么是响应式布局？

响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。

　　响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，用大势所趋来形容也不为过。随着越来越多的设计师采用这个技术，我们不仅看到很多的创新，还看到了一些成形的模式。

二、响应式布局有哪些优点和缺点？

　　优点：

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

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

　　缺点：

　　兼容各种设备工作量大，效率低下

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

　　其实这是一种折衷性质的设计解决方案，多方面因素影响而达不到最佳效果

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

三、响应式布局该怎么设计？

　　我们在上面了解了什么是响应式布局，那在我们的实际项目中应该怎么去设计呢？在以往我们设计网站的时候都会受到不同浏览器的兼容性的困扰，现在还要来个不同尺寸设备，我们该怎么淡定下来呢？有需求就会有解决方案，呵呵，说到响应式布局，就不得不提起CSS3中的Media Query（媒介查询），这可是个好东西，易用、强大、快捷……Media Query是制作响应式布局的一个利器，使用这个工具，我们可以非常方便快捷的制造出各种丰富的实用性强的界面。接下来就一起来深入的了解Media Query。

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

　　通过不同的媒体类型和条件定义样式表规则。媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件。媒体查询的大部分媒体特性都接受 min和max用于表达”大于或等于”和”小与或等于”。如：width会有min-width和max-width媒体查询可以被用在CSS中的 @media和@import规则上，也可以被用在HTML和XML中。通过这个标签属性，我们可以很方便的在不同的设备下实现丰富的界面，特别是移动设备，将会运用更加的广泛。

　　2、media query能够获取哪些值？

　　设备的宽和高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：

　　<link rel=“stylesheet” type=“text/css” media=“only screen and （max-width： 480px），only screen and（max-device-width： 480px）” href=“link.css”/>

　　上面使用中only可省略，限定于计算机显示器，第一个条件max-width是指渲染界面最大宽度，第二个条件max-device-width是指设备最大宽度。

　　示例二：在样式表中内嵌@media：

　　@media （min-device-width:1024px） and （max-width:989px），screen and （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、测试Media Queries

　　最后，我们需要对我们刚刚设计的Media Queries进行测试，想要在不同设备上测试Media Queries的效果，可以使用一个浏览工具来检验不同尺寸屏幕下的显示效果，在这里为大家介绍一个不错的在线工具 – Responsivator，它可以模拟iPhone等各种不同设备，并且还可以自定义不同尺寸屏幕的显示效果，只需要输入一个url甚至是本地的一个 url（如），就可以看到网站在不同尺寸屏幕下的显示效果。

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

　好了，我们明白了什么是Media Query，那我们一起来运用到响应式布局的设计项目中去。设计思路很简单，首先先定义在标准浏览器下的固定宽度（假如标准浏览器的分辨率为 1024px，那么我们设置宽为980px），然后用Media Query来监测浏览器的尺寸变化，当浏览器的分辨率小于1024px的时候，则通过Media Query预设的样式表来将页面的宽度设置为百分比显示，这样子页面的结构元素就会根据浏览器的的尺寸来进行相对应的调整。同理，当浏览器的可视区域改变到某个值（假如为650px）的时候，页面的结构元素根据Media Query预设的层叠样式表来进行相对应的调整。看看我们的例子：

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

　　@media screen and （max-width： 980px） {

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

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

　　#sidebar {width： 30%;}

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

　　}

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

　　@media screen and （max-width： 650px） {

　　#header {height： auto;}

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

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

　　#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， section {

　　display： block;

　　}

　　/* 设置图片视频等自适应调整 */

　　img {

　　max-width： 100%;

　　height： auto;

　　width： auto9; /* ie8 */

　　}

　　.video embed， .video object， .video iframe {

　　width： 100%;

　　height： auto;

　　}

　　最后要注意的是在页面的头部<head></head>之间加上下面这句∶

　　<meta name=“viewport” content=“width=device-width; initial-scale=1.0”>

　　meta viewport这个属性是在移动设备上设置原始大小显示和是否缩放的声明。

　　参数设置∶

　　width – viewport的宽度

　　height – viewport的高度

　　initial-scale – 初始的缩放比例

　　minimum-scale – 允许用户缩放到的最小比例

　　maximum-scale – 允许用户缩放到的最大比例

　　user-scalable – 用户是否可以手动缩放

　　最后对于在IE浏览器中不支持media query的情况，我们可以使用Media Query JavaScript来解决，只需要在页面头部引用css3-mediaqueries.js即可。示例：

　　<！--［if lt IE 9］>

　　<script src=“

　　</script> <！［endif］-->

9.一个普通的自适应显示的三栏网页，当你用不同的终端来查看这个页面的时候，他会根据几种终端来显示不同的样式，在电脑上是三列，在pad上应该也是三列，在大屏手机上是三行，在屏幕小于320的手机上只显示主要内容，隐藏掉了次要元素。（这个demo也可以用拖动浏览器大小的方式测试。）

这就是一个最简单的 响应式布局 的页面。我们就从这个例子里认识下media query属性吧。

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

就从这个条件语句开始介绍，media属性后面跟着的是一个 screen 的媒体类型（上面说过的十种媒体类型之一）。然后用 and 关键字来连接条件（其他关键字还有 not， only，看字面大家能理解，就不多说。），然后括号里就是一个媒体查询语句，稍微懂点css的同学都能看懂，这个条件语句意思是在大于320小于479的分辨率下所激活的样式表。

这个语句，就是响应式布局的基础应用了。在判断终端分辨率大小之后，赋予不同的样式进去，就像我们的例子里

@media screen and (max-width : 320px){

body{...}

}

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

body{...}

}

至于要判断多少种分辨率，完全取决于你产品的需求，常见的分辨率有手机，平板（注意这些终端是存在横屏竖屏区别的,这个下一篇里提），桌面显示器。自己为自己所面对的终端定制样式。

一般大于960的显示器都可以用默认样式而不必在媒体查询里判断了。有一种情况除外，就是高像素比的终端，比如 iphone4以上的retina屏，一个iphone5的小小的屏幕（iphone的屏幕是真小啊），他的分辨率竟然达到了1136*640，如何让放大了两倍的屏幕显示依然清晰？

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

比如例子里的

@media only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2)

就是判断终端的像素比是2的话，所渲染的样式。iphone4以上像素比是2，高分辨率Andriod设备像素比是1.5，例子里只有像素比为2的查询，1.5的或者其他比例方法一样，前面用的是几种浏览器的私有属性，最后一种是通用属性，

@media only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2)

等于

@media only screen and (min-device-pixel-ratio: 2)

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

body{

font-size:24px;

}

.box2{

background: url(d/20.png) #ccc;

background-size:50%;

}

在像素比为2的终端里这样写的目的，就是让他显示的更容易识别，一般来说显示一张1px的背景图片，我们要准备一张2px的，然后再background-size:50%这样。1.5像素比同例。

比如上面的demo，如果你用iphone4以上的苹果手机来看，中间的背景图片应该是显示“2.0像素比”。

这里也暴露了响应式一个很大的缺点：需要多做若干背景图（作为内容显示的图片暂时无视，弹性图片与弹性字体，下次单独写一篇介绍博文介绍）。

对于media query的兼容性，我想不是很重要，因为很少有终端自带IE9以下的浏览器。基本都是高级浏览器。如果特殊需要，可以下载一个兼容的JS文件

<!--[if lt IE 9]>

<scriptsrc="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>

<![endif]-->

以条件注释的方式加在文件里。

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

虽然说响应式设计的理想状态是，需对pc/移动各种终端进行响应；但是现实是高分辨率的pc端与手机终端屏幕相差太大，像电商这样有大量图片和文字信息的同时排版要求精准的页面，设计一个同时适应高分辨率pc又适合小尺寸的手机终端是挑战；同时高分辨率下pc页面信息量巨大，对于手机端用户是否需要，也许会造成带宽浪费;再者手机终端和pc终端的用户操作习惯也相差甚大，这种多图多信息量要求精准的页面，设计出来恐怕会是2个完全不同的版本，也许各自维护更方便。由于业务形态原因，随着用户分辨率的提高，1024×768已不再是主流，宽屏用户比例越来越大，因此我们的响应式考虑如何充分利用PC 用户设备上更多空间而设计。下图为淘宝用户的屏幕分辨率和浏览器比例，鉴于ie8-浏览器目前占比约70%，media query的ie8-兼容迫于现实还是要做，泪……

media query简介

miedia query有2种引入方式：

1.link标签方式

2.css方式

媒体类型有很多种：‘aural’, ‘braille’, ‘handheld’, ‘print’, ‘projection’, ‘screen’, ‘tty’, ‘tv’、‘embossed’、‘speech’、’3d-glasses’，但最常用的是screen和print,对于前端们来讲最常用的应该只有screen了。应用于所有媒体类 型可以用all，省略不写默认就是all。media query支持很多表达式，常用的如下，完整的查看这里：

利用media query可以轻松实现不同屏幕宽度时切换不同的页面布局，但是很不幸ie8及以下都还不支持media query，于是开始了下面的media query兼容之旅……

目前实现media query ie兼容的库比较成熟的有respond.js和css3-mediaqueries-js；它们各有优劣，respond.js压缩后1k，只实现了media query中最常用的min-width max-width的兼容；css3-mediaqueries-js基本实现了所有css3规范中的media query特性的兼容，所以导致压缩有16k，测试反馈其性能远低于respond.js;不过确实一淘首页2次响应式设计均只需用到max-width和min-width，Modernizr 和 H5BP 也均推荐使用respond.js,下面具体看看它们的实现吧

respond.js源码分析

使用方式

官方demo地址：http://scottjehl.github.com/Respond/test/test.html

实现思路

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

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

3.ajax回调后仅分析response中的media query的min-width和max-width语法，分析出viewport变化区间对应相应的css块

4.页面初始化时和window.resize时，根据当前viewport使用相应的css块。

其余的代码就是ajax实现和translate media query的max-width min-width的逻辑了；可以看出这里必须依赖ajax请求css路径才能得到css文件中的mediaquery的内容，那ajax的跨域问题就要 解决了；由于我们的静态资源都是要放cdn的，respond.js也给出了跨域方法，即引入代理页面。

这里ajax跨域实现是通过代理页面将获取到的css，再通过window.name通信实现；如在respond.proxy.js中

因为实现跨域代理的问题，初始化页面时应用上全部css耗时较长，以下光测试从开始执行该js文件到css取回调用之前的耗时为500ms-515ms之间（每次刷新结果不一样），ie8下测试结果如下

测试结果发现，刷新页面后会有明显的闪屏（以该测试demo为例，一开始页面背景是黑色的，这是默认css中的，跨域js执行完成后分析出media query中的该viewport尺寸下应该应用red的背景，所以又变成红色），间隔时间为500ms以上。所以体验不是很好，而且该场景中ajax跨 域目前已经没有更好的实现方式，500ms间隔的闪屏避免不了。

同时因为是ajax请求css,所以会因为响应式而额外产生一个请求，好在之前css请求过一遍，这次ajax请求是读取浏览器缓存中的，如下图中fiddler的检测结果中的第三个请求和第六个请求：

respond.js总结

优点：压缩后仅1k,不跨域时性能ok，只需引入respond.js通用易用

缺点：仅支持media query的min-width和max-width（用于响应式够用）；支持跨域，虽然配置有点麻烦，实现跨域代价高而且有闪屏体验欠佳。

css3-mediaqueries-js源码分析

css3-mediaqueries-js官方文档和demo都没有，相对于respond.js css3-mediaqueries-js支持几乎所有的media query的语法，访问测试demo

实现逻辑

其实现逻辑和respond.js差不多，只是更加支持的media query更加全面，同时支持内联style，支持各种宽度单位(em|ex|px|in|cm|mm|pt|pc),但是这里的初始化是在domready后执行，为了让用户感觉不出页面有闪屏（之前应用初始化样式然后js提取media query中的样式再覆盖一遍）现象，这里的实现是先将html移出可视区域外，等解析完media query后再重置回来，但实际目测感觉稍有闪屏（当然这里的测试是测试body背景色，移出可视区域外不管用，当然绝大部分响应式场景是适用的），实现如下：

其余实现和respond.js基本一致，也需要使用ajax，所以css3-media-queries.js本身不支持跨域，当然非要支持跨域 也可以，也可以像respond.js一样使用代理页面跨域即可，但也会出现闪屏的现象。还是先看看不跨域情况下，大多数人为什么选择respond.js，主要原因还是完美支持的media query特性导致压缩后16K，下载和执行时间都逊于respond.js，下面是同域下在ie8的测试结果（耗时140ms而respond.js仅15ms）：

css3-mediaqueries-js总结

优点：1、基本支持所有css3中的media query语法

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

全局切换class

因为css/js需要放到cdn上面，需要跨域，css3-mediaqueries-js不支持跨域，respond.js支持跨域但是实现跨域后性能较差，有闪屏体验也差，而且配置麻烦，不方便各个业务通用。对比respond.js和css3-mediaqueries-js可知，实现响应式 应用min-width和max-width足矣；同时模拟media query的效果只需要在2个关键时间点根据viewport切换css（初始化页面时和window.resize）即可。所以可以选择切换css link，可以动态切换css块,也可以切换class

切换css link（优点：逻辑清晰；缺点：增加请求数，维护麻烦，如修改一个模块涉及到3个尺寸的响应,至少需要改3个文件）

切换内联css块(respond.js和css3-mediaqueries-js就是通过js分析出media query然后自动根据当前viewport切换css块，这个理想环境下是最好的，自动分析只管写media query，但是依赖ajax获取css内容，跨域实现成本高体验也不好)

全局切换class(特别是初始化页面时最好在页面内容未开始渲染之前切换class，不然会出现像韩国naver购物频道在宽屏时刷新效果，刷新时内容由中间向外偏），特定viewport用特殊全局class标记，响应式样式继承在该class下，实现大致如下：

实现方式

全局切换class这种方式维护也是个问题，首先是js分散2处，body最上方切换全局class，domready时window.resize时切换class,同时响应式尺寸增加时，需要改变js判断条件；再看css的维护，media query一份，加全局class一份相同的，维护需要同时修改2次，初期media query几十行也能接受，但是后来改版media query几百行，这样维护成本就大大增加了，全局class和media query copy相同的代码引入less解决，使用方法如下：

目前一淘新首页采用以上方法维护，支持1200px、990px、750px三个尺寸的响应，不得不承认维护成本还是偏高，欢迎各种改进建议,

响应式（自适应屏幕）相关推荐

1. 超美响应式自适应引导页带音乐播放器源码

   介绍: 超美响应式自适应引导页带音乐播放器源码,纯html源码,右键记事本修改即可~自带音乐播放器,自带自动打字特效,自带网站存活时间,自带随机ACG背景,自适应响应式网页 网盘下载地址: http: ...

2. 分享一套响应式自适应公司网站官网源码，带文字搭建教程

   分享一套响应式自适应公司网站官网源码,带文字搭建教程.需要源码学习可私信我. 技术架构 PHP7.2 + nginx + mysql5.7 + JS + CSS + HTML cnetos7以上 + ...

3. 【PHP】高端响应式自适应房屋出售建筑设计企业织梦模板

   高端房屋出售建筑设计企业织梦网站模板是一套设计风格简洁的房屋建筑类企业模板.页面设计相对比较独特,有些特别的设计, 特别是对房屋展示方面的东西做的很好.页面简洁大气,干净利落.很适合房屋出租,建筑设计 ...

4. 响应式自适应公司网站官网源码分享

   响应式自适应公司网站官网源码文字搭建教程 需要源码学习可私信我. 技术架构 PHP7.2 + nginx + mysql5.7 + JS + CSS + HTML cnetos7以上 + 宝塔面板 系 ...

5. 前端响应式/自适应/流动布局

   文章目录 1. 控制视口(viewport) 2. 媒体查询 2.1 媒体类型 2.2 媒体特征 2.3 逻辑条件 2.4 使用媒体查询设置断点 3. 图片的自适应 4 自适应图片等素材 5 不使用绝 ...

6. 屏幕的宽度_交互规范：响应式让屏幕利用更高，用户体验更佳

   让用户在不同设备和尺寸的屏幕下看的页面显示效果更佳,屏幕空间利用更高,操作体验更统一,交互方式更符合习惯.本文主要围绕什么是响应式,如何搭建响应系统,响应式网站解析 三个部分进行阐述,在项目中提前定义 ...

7. wap商城源码php,ecshop商城源码html5手机wap响应式自适应php网站模板带后端dossy

   购买须知: (1)因送吗安装费用的调整,故需要安装的用户请先联络我们!无联络硬拍的慎重! (2)联络好了安装的用户请自行备好服务器域名等... (3)素质低下,贪小便宜,追求完美者请绕道! (4)手动 ...

8. bootstrap框架下的响应式自适应布局

   响应式布局:一个网站的展示能够兼容多个终端(手机,iPad,PC等),而不需要为每一个终端单独做一个展示版本. Bootstrap 提供了一套响应式.移动设备优先的流式网格系统,随着屏幕或视口(vie ...

9. 10款响应式自适应网站模板（一）

   技术文章个人博客响应式模板 html5响应式网页背景图片视差滚动模板 大气的印刷包装公司响应式网站html5模板 黑色简洁的橡胶塑料产品公司网站模板 蓝色响应式的商业咨询服务公司网站模板 红色响应式的 ...

10. html 自适应单位vw,CSS3响应式自适应尺寸视窗单位vw、vh详解

    vw.vh.vmin.vmax是CSS3新增的视窗单位,同时也是相对单位,它相对视窗(Viewport)大小的百分比. 什么是视窗? 视窗即Viewport,是浏览器实际显示内容的区域,不包括工具栏. ...

最新文章

1. java cometd_关于cometd的一些经验总结-java端
2. Mybatis使用总结
3. DL之FAN：FAN人脸对齐网络(Face Alignment depth Network)的论文简介、案例应用之详细攻略
4. MySQL优化之推荐使用规范
5. MySQL调优（一）：使用profiles、performance_schema性能监控
6. ARM中断分析之一：中断控制器和CPU、外设的关系
7. 20151227感知机(perceptron)
8. BZOJ 3261: 最大异或和位置-贪心+可持久化01Trie树
9. paip.项目开发效率提升之思索
10. Linux配置静态IP 详细截图
11. 【bug解决】上传图片后，取消这次上传 再次执行上传，上次的图片还存在
12. WIN10桌面文件夹图标变黑解决方法~
13. 判断三维空间中三点是否共线
14. Python- sklearn之最小二乘法
15. PHP中的SAPI是什么，都有那些模式？
16. 扇贝编程python学习笔记-基础篇4
17. 入耳式蓝牙耳机哪种音质好?微型蓝牙隐形耳机推荐
18. Java项目开发，学生信息管理系统
19. HttpRequest 和HttpWebRequest的区别(转)
20. Error contacting service. It is probably not running解决

热门文章

1. 【笔记】canvas 绘制足球 —— 第一步 画个球体
2. 图解HTTP----web的攻击技术
3. Jenkins 插件开发记录
4. Cookie是什么？从哪来？存在哪？往哪去？
5. 错误1053 服务没有及时响应启动或控制请求
6. 对Slim 框架进行总结 一
7. 简单的STM32蓝牙遥控小车完整项目及资料分享，超全
8. Java基础冒泡排序——高低输出十个学生的成绩
9. 使用google高级搜索技巧
10. Python pandas库｜任凭弱水三千，我只取一瓢饮（7）