移動端適配方案-rem(基礎篇)

　　

　　常見移動web適配方案通常有3種方法，以下圖：

　　

　　　　 ①：定高，寬度百分比（通常用來作一些適配性不高的頁面，好比主要以一些文字和圖片爲主的網頁或移動端的頭部和底部）

　　　　②：flex （更多的用於複雜頁面的佈局。具體參照阮一峯大神寫的-Flex 佈局教程：語法篇和實例篇

　　　　　　http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool （語法篇）

　　　　　　http://www.ruanyifeng.com/blog/2015/07/flex-examples.html  （實例篇）

　　　　③：媒體查詢（css3 media媒體查詢器用法總結：http://www.bubuko.com/infodetail-268180.html

　　　　注：flex佈局和媒體查詢以及接下來要講的rem均可以實現移動端的平常響應式開發

　　　　　　推薦使用flex佈局或rem來實現移動端的響應式開發，由於媒體查詢要單獨針對不一樣的分辨率寫相應的樣式，你懂得

 

 

　　　　Rem:（等比例縮放）【推薦】

　　　　如下是我在學習rem的過程中看過的2篇寫得比較好的文章，內容易理解，也比較全面，適合入門。

　　　　看完之後，對rem就瞭解得差很少了，因此就再也不贅述。

　　　　https://www.jianshu.com/p/b00cd3506782　　手機端頁面自適應解決方案—rem佈局基礎篇

　　　　https://www.jianshu.com/p/985d26b40199　　手機端頁面自適應解決方案—rem佈局進階版

 

 

　　補充：（字體大小建議根據實際狀況來決定使用rem或px）

rem通常用於設置根元素字體大小，1rem就是html根元素的字體大小，2rem就是html字體大小的2倍，1.5rem是html字體的1.5倍，0.75rem則是html字體大小的四分之三，依此類推。 所以，rem是一個相對長度單位，當改變html根元素的字體大小時，全部以rem爲單位的都會隨之放大或縮小。 首先你須要知道rem是指頁面根元素的字體大小，即html的font-size，默認狀況下，html的font-size是16px，至關於1rem = 16px; 但有一種狀況須要考慮，即：若是rem被改變時。好比你引入的第三方UI組件或插件中設置了html的font-size:100px; 那麼此時的1rem = 100px;會覆蓋瀏覽器默認的1rem = 16px; 若是引入第三方UI組件或插件單位用的px，還須要所有轉換成rem