用rem做响应式开发

设置对应的响应式的html rem比例

rem就是根元素（即：html）的字体大小。html中的所有标签样式凡是涉及到尺寸的（如： height,width,padding,margin,font-size。甚至，left,top等）你都可以放心大胆的用rem作单位。

我们平常在使用长度单位都会使用px，但是在做上面的响应式的时候，需要用rem或者百分比的单位，大家可以看我的Demo代码。在上篇文章介绍了rem的字体设置计算方法：

 html{
     font-size:62.5%; /* 10÷16=62.5% */
 }
 body{
     font-size:12px;
     font-size:1.2rem ; /* 12÷10=1.2 */
 }
 p{
     font-size:14px;
     font-size:1.4rem;
 }

通过设置html的font-size值来控制全局的rem输出，这段代码其实是这个rem的精髓所在，我在我的页面中设置了如下的代码来控制不同设备下的字体大小显示使其达到自适应：

 html {
     font-size: 62.5%;
 }
 @media only screen and (min-width: 481px){
     html {
         font-size: 94%!important;
     }
 }
 @media only screen and (min-width: 561px){
     html {
         font-size: 109%!important;
     }

 }
 @media only screen and (min-width: 641px){
     html {
         font-size: 125%!important;
     }
 }

看上面的代码，可能大家会觉得为什么要这样设置呢，其实这个是根据许多测试推算出来的，上面代码如果要转换城px会变成这样：

 html {
     font-size: 62.5%; /* 10÷16=62.5% */
 }
 @media only screen and (min-width: 481px){
     html {
         font-size: 94%!important; /* 15.04÷16=94% */
     }
 }
 @media only screen and (min-width: 561px){
     html {
         font-size: 109%!important; /* 17.44÷16=109% */
     }

 }
 @media only screen and (min-width: 641px){
     html {
         font-size: 125%!important; /* 20÷16=125% */
     }
 }

给margin padding 设置rem

上面展示的是怎么通过计算获取到不同分辨率下的html font-site百分比的值。实际开发如果设计师是按照640的宽度去设计的，我们就按照最大的640去切图，切图的时候如果我们要设置margin怎么banner，设计图的值加入是10px的间距，我们通过640的比例去计算：

 margin-top:.5rem; /*10 ÷ 20 = 0.5*/
 padding-top:1rem /* 20 ÷ 20 =1 */

上面分别是设计图上的间距10px和20px计算成rem的方法，大家可以以此类推，如果你的设计图是640设计的就可以用上面的方法，反正每次以最大的值来计算就可以了。

给height width 设置rem

实际开发中大家最常设置的估计就是height width值了，为了做到各个设备下长度自己相应，许多开发人员会用百分比来做，这个是没有问题，但是其实很多场景下用rem比百分比更加灵活，在我实际开发中，一般我只在大块的div布局里面用百分比，元素的设置一般都用rem来。例如：

 height:100px; /* 100 ÷ 20 = 5rem;*/
 width:50px; /* 50 ÷ 20 = 2.5rem;*/