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