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值不固定;