Kyle博客

概念

响应式布局，就是响应式设计方案的呈现。具体点就是在不同的设备上，网页能自动识别屏幕宽度、并根据设备的显示面积（一般情况下是指的屏幕宽度，当然，也可以是其他的，可以在下面详细解释）显示出不同的效果。通俗点就是设计一套布局，在PC端和移动端都可以使用。

如何实现响应式布局？

通俗的有三种方法

1、百分比

通过将每个盒子的宽度设定百分比来实现。

优点：简单方便要

缺点:在额外设置margin、padding时，或者使用不同浏览器时，会使得布局混乱 

2、meta标签

代码段为：

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

这主要是为了让代码适应移动端的屏幕，其中，viewport 是指需要加载meta 标签时读取的名字为“视口”，其中的 width 需要等于 device-width（设备宽度），主要是告诉浏览器，将布局视口的宽度设置为设备最理想的宽，initial-scale（缩放比例） 为1，这样就保证了加载的时候，要获取设备的宽度，同时要保持原始大小，便于媒体查询 

3、@media 媒体查询

媒体查询的写入方式：

1、style标签中的media属性

<style media="screen and (max-width:340px)"> 屏幕不超过340的时候才执行下面的内容

body{

background:#00a9c1;

}

<style>

不同的媒体查询可以并列起来（上下两个媒体查询可以一起写）

<style media="screen and (min-width:340px) and (max-width:720px)">

body{

background:rgb(16,136,65);

}

</style>

 

2、在link标签中设置media属性

上述代码分别设置了宽度小于340px和340-720px的背景颜色。下面我们通过引入外部css样式的方法来继续写720px-1080px的样式。

<link rel="stylesheet" href="720-1080.css" media="screen and (min-width:720px) and (max-width:1080px)">

3、外链css样式中的@media属性（用的最多）

只引入外部css文件，查询全部写在外部css文件中。完美的实现了内容和样式的分离。

在head标签中写入： <link rel="stylesheet" href="1080.css"> 

在1080.css中写入：

@media screen and (min-width:1080px) and (max-width:1100px) {body{background: rgb(255,0,255);}}

我们在设计分辨率的节点的时候，要以比较关机的机型的分辨率作为参考来设置。

比如iPhone4、5的宽度是320px，这个节点就非常重要，它是小屏幕手机的一个分界点，一般都会在媒体查询的时候设置这个点。

ipad mini的宽度是768，所以第二个节点就设置为768 。

兼容性

IE6、IE7、IE8是不支持媒体查询的。

解决方案：css3-mediaqueries.js。引入此文件可以解决IE6-8无法实现响应式媒体查询的尴尬。

在Bootstrap上面我们可以找到这个在线的库。

（在bootstrap上面搜索css3之后就可以看到）

引入地址的写法：

<!--[if lt IE 9]>    //条件注释判断是IE9以下版本的浏览器

<script src="https://cdn.bootcss.com/livingston-css3-mediaqueries-js/1.0.0/css3-mediaqueries.js"></script>（完整版）

<script src="https://cdn.bootcss.com/livingston-css3-mediaqueries-js/1.0.0/css3-mediaqueries.min.js"></script>（min版，两个版本任选其一）

<![endif]-->

 

em、rem是尺寸单位，可以用在字体上面，也可以用在其他元素上面。

取值来源：

em：父级元素上定义的font-size为基准的倍率尺寸。

比如：html结构为<div><p></p></div>

样式里面设置div{

font-size:20px;

}

p{

width:30em;

height:2em;

}

通过例子我们可以知道，em取值的大小是根据父级设置的字体大小来确定的，默认情况下1em=16px（就是浏览器默认字体大小），但em不仅可以用于设置字体的大小，还可以用于设置其他元素的大小（如p、input等）。

第二个例子：<div class="outer">

<div class="middle">

<div class="inner">

</div>

</div>

</div>

然后设置样式：.outer{ font-size=100px }

.middle{ font-size=0.5em }

.inner{ width:3em;height:3em }

inner的宽高是150px。因为字体的尺寸是可以继承的，middle的大小是50px，inner的大小就是3个0.5em，也就是150px，而不是300px。

通过这个例子我们可以知道，在嵌套中计算字体大小是比较麻烦的，所以有了rem的这个单位。

rem：root font-size+em，即设定html的字体大小，根据这个大小来设定其他元素的大小。这个html的字体大小不能设定为10px，推荐为20px。

通过引入resize.js，可以方便设置rem。

/*获得页面宽度后动态修改html上的fontsize
* 320为iphone5设计稿下的页面宽度，如下设置后页面的页面在iphone5等宽屏幕上html
* 的font-size会变为20px，即 1rem = 20px    1px=0.05rem
* 所以设置元素尺寸的时候，如果测量设计稿 15px  则需设置尺寸为 (0.05*15)rem = 0.75rem   
*/
!(function(doc, win) {
    var docEle = doc.documentElement,
        evt = "onorientationchange" in window ? "orientationchange" : "resize",
        fn = function() {
            var width = docEle.clientWidth;
            width && (docEle.style.fontSize = 20 * (width / 320) + "px");
        };
     
    win.addEventListener(evt, fn, false);
    doc.addEventListener("DOMContentLoaded", fn, false);
 
}(document, window));

上面的例子以iPhone4、iPhone5的320像素为参考，以20像素为基准，在这些设备上设置1rem显示的就是20px。如果设计稿要求以320px的屏幕为基准显示15px，则需设置元素大小为0.75rem。

优点：现在大部分的响应式布局都是使用@media 来实现的，可以书写大量的公共样式，在需要适应屏幕的时候，在大括号内加入相应的功能即可实现响应式布局。

缺点：可能需要对同一个类书写不同的样式，代码比较繁复，难度也稍微难点。

  

在应用中使用哪种方法实现响应式？

没有哪一种方法是完美的，推荐的是三种方法交替使用，在恰当的地方使用恰当的方法。

在布局过程中，一般都是宽度的百分比与媒体查询交替使用的，并且在加载网页之前，加入meta标签，定义一下viewport的内容，这样更方便于移动端的响应。也兼顾了设备的兼容性。

 

而响应式的设计方案的一般做法就是根据目标用户的访问设备的主要类型做三种或四种布局。每种布局有一个区间，比如说小屏的手机分分辨率可以设定为[320,640]。然后分别设计每种布局即可，一般来说，各个布局主要是调整模块的排列布局顺序，内容调整越少越好（尽量减少用户适应成本）。

 

响应式优点

与以往的弹性盒子相比，响应式布局会更好的、更主动的根据用户设备变化更呈现出不同的效果，它比弹性盒子更灵活，可读性更强。响应式的一套方案解决所有设备的自适应问题。

 

响应式缺点

研发难度高，对应的css文件可能是多个，也可能是单个。