媒体查询·rem布局

1、响应式页面概述

1.1 响应式页面

用chrome浏览器来模拟手机端的浏览效果，可以看到手机端和电脑端访问同一个网页时，都能获得比较好的浏览体验。

也就是说，一套代码可以同时适应多个设备。这样的网页就是响应式网页。这样的网页，就是基于媒体查询实现的。

特别注意的是，我们访问同一个网站的地址，用手机可以正常浏览，用电脑也可以正常浏览，这并不一定就是响应式页面，它只是针对终端设备的不同，展示了两套代码而已。响应式页面强调的是一套代码。

2、媒体查询

通过媒体查询，我们让css检测到浏览器视窗的展示尺寸，然后根据不同的浏览器视窗尺寸设置不同的样式，进而实现了同一套代码适应不同设备的功能。

2.1 max-width

媒体查询是CSS3中增加的新特性，可以使用@media来定义不同的条件和样式，窗口尺寸（或设备尺寸）满足指定条件的时候才会应用指定的样式，实例代码如下所示。

全屏打开浏览器的时候（PC端的浏览方式），我们可以看到div元素的背景色为红色，当我们将浏览器的窗口缩小（移动端的浏览方式），当浏览器尺寸宽度小于600px的时候，元素的背景色会变成蓝色，这就是利用媒体查询实现的最基本的响应式页面，同一个文件，在不同设备上呈现着不同的样式。

max-width定义的就是标准，符合标准就会让下面的样式生效，max-width这个标准的意思就是：小于指定宽度，样式生效。

2.2 min-width

同样，我们也可以定义“大于指定宽度，样式生效”，实例代码如下所示。

@media screen and(min-width:600px){

.box{

background-color:blue;

}

}

上述代码与demo01的效果刚好相反，PC端呈现蓝色，移动端呈现红色，min-width的意思是：大于指定宽度，样式生效。

2.3 多个标准

我们也可以给一个媒体查询定义多个标准，实例代码如下所示。

@media screen and(min-width:600px)and(max-width:900px){

.box{

background-color:blue;

}

}

窗口大于600px并且小于900px的时候，样式生效，我们可以将浏览器窗口由大到小的收缩，可以看到元素颜色变化了两次。

3、响应式页面

利用媒体查询实现一个响应式的页面效果，让其在PC端可以显示一个横线列表，在手机端可以显示冲向列表

4、响应式页面的缺点

在真实项目开发中，响应式页面并不常用，主要是因为一下几点。

为终端定制的页面，用户体验更好。

响应式页面代码量会增多，影响网页性能。

网页后期维护成本增加。

除非网页具备以下特点：

网页本身并不复杂。

对用户体验要求不高。

希望多终端访问，又希望降低开发成本。

就可以选择响应式页面了。

1、移动端页面布局概述

PC端页面的网页重构，我们使用最多的单位是px。因为在PC端，大部分页面效果我们都可以设置成固定尺寸，

但是在手机端，这种方案是不可行的，我们必须要按照百分比呈现页面，才能保证网页在任何设备上可以正常显示。

为了实现这样的功能，我们可以将所有的尺寸都设置成百分比，但是这样会给前端开发带来大量的计算工作。

为了实现百分比的效果，又能省去大量的计算工作，我们使用rem布局。

2、rem概述

rem是CSS3中新增的单位，我们现在回顾和对比一下css中的常用的单位：

px

em

rem

单位em和rem的区别

em是一个相对单位，它参照的是父级元素的font-size值。

rem也是一个相对的单位，它参照的是html元素的font-size值。

3、rem布局

rem的参照物是html元素的font-size属性，那么如果html的font-size属性不变的话，我们使用的rem单位仍然是一个固定的单位，所以我们需要做的是让html元素的font-size属性在不同的设备中设置不同的值，这就需要一段js代码了，代码如下所示（fontsizeset.js）

(function(doc,win){vardocEl=doc.documentElement,resizeEvt='orientationchange'inwindow?'orientationchange':'resize',recalc=function(){varclientWidth=docEl.clientWidth;if(!clientWidth)return;docEl.style.fontSize=100*(clientWidth/720)+'px';};if(!doc.addEventListener)return;win.addEventListener(resizeEvt,recalc,false);doc.addEventListener('DOMContentLoaded',recalc,false);})(document,window);

我们并不需要理解上面的这段代码是如何执行的，只需要知道这段代码可以检测设备的尺寸，并通过设备的尺寸设置html元素的font-size值，这个font-size值会根据设备尺寸的变化而变化，这样我们设置相同的rem值，就会起到百分比的作用了。

在上面的代码中，我们将div的宽和高都设置成了3.6rem，用浏览器打开，发现元素宽度与高度相同，并且宽度始终是窗口宽度的50%。这说明rem布局与百分比布局能实现相同的效果。