rem自适应布局小结001

在最近的移动端布局当中，最炙手可热的方式便是使用rem进行元素的布局。以下便是从最近的文章中所总结出来的一点东西。

首先，我们必须有以下的疑问：

rem的本质是什么？

rem如何实现自适应布局？

如何根据设计稿来调整rem的值？

rem布局是能纯CSS还是必须JS进行辅助？

接着，我们来稍微解答或者解决以上的问题

一.rem的自适应原理

rem（font size of the root element）是指相对于根元素的字体大小的单位，既是一个相对的计量单位。而于此类似的便是em（font size of the element）是指相对于父元素的字体大小的单位。所以，两个都是相对计量单位。区别在于一个相对于根元素，一个相对于父元素。rem就是根据HTML的font-size大小来进行的变化。基于该原理，可以在每一个设备下根据设备的宽度设置对应的html字号，从而实现自适应布局。

二.rem 的值

目前有两种，一种是根据js来调整html的字号，另一种则是通过媒体查询来调整字号。

三.移动端使用rem布局

　　在采用rem之前移动端的主流适配方案

　　1.流式布局（百分比布局）

　　优点: 简单方便,使用简单,只需固定高度即可,宽度自适应 ；

　　缺点: 在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度还是和原来一样，实际显示非常的不协调；

　　2.固定宽度

　　优点: 与设备宽度做等比缩放 ；

　　缺点: 在大屏幕手机下两边是留白的，还有一个就是大屏幕手机下看起来页面会特别小，操作的按钮也很小，手机淘宝首页起初是这么做的,但最后改版了，采用了rem；

　　3.响应式做法

　　优点:可以节约成本，不用再专门为自己的网站做一个webapp的版本,所以一般都是中小型的门户或者博客类站点会采用响应式的方法从web page到web app直接一步到位；

　　缺点:工作量大，维护性难,这种方式在国内很少有大型企业的复杂性的网站在移动端用这种方法去做；

　　采用rem的优势

　　开头提过rem是指相对于根元素的字体大小的单位,网页中的根元素指的是html我们通过设置html的字体大小就可以控制rem的大小。

　　

html{
　　font-size:10px;
}

.btn{
　　width:6rem; 
　　height:3rem; 
　　line-height:3rem; 
　　font-size:1.2rem; 
　　border: 1px solid #333; 
　　color: #333; 
　　border-radius: 0.5rem; 
　　text-align: center; 
　　margin: 10px auto;
}　

　

　　此时，我们会发现整个按钮大小是60px*30px。如果我们将根元素的font-size更改为20px，按钮就会变成120px*60px。是之前的等比放大。

　　所以。我们仅仅是改变了根元素html的font-size，而.btn元素的width，height的rem属性不变，就实现了按钮在web中的改变。

　　所以，得出

　　1rem = 10px 在根元素的 font-size = 10px 的时候；

　　1rem = 20px 在根元素的 font-size = 20px 的时候；

　　1rem = 40px 在根元素的 font-size = 40px 的时候；

　　在上面两个例子中我们发现第一个案例按钮是等比例放大到第二个按钮，html font-size的改变就会导致按钮的大小发生改变，我们并不需要改变先前给按钮设置的宽度和高度，其实这就是我们最想看到的。

　　正是基于这个出发，我们可以在每一个设备下根据设备的宽度设置对应的html字号，从而实现了自适应布局。

三.现在rem主流的适配有两种方案：　　

　　1.rem随设备宽度做自适应，scale值固定为1 ;
　　2.rem随设备宽度做自适应,viewport进行缩放，scale值不固定;