使用rem來開發你的移動端網站

時間 2019-11-21

標籤使用 rem 開發移動網站欄目無線简体版

原文原文鏈接

　what is rem ？css

　　1）css3中的計量元素大小的單位，相似px、pt、em。html

　　2）一種相對根元素font-size的計算方式。1rem = <html>'s font-size px (你懂就好)css3

　　3）使用場景：每一個元素的寬高、文字大小、行距、補白等一切可使用長度單位的地方。iphone

　　4）使用範例: 佈局

html{font-size:37.5px;}/*根元素的基礎font-size被設置爲37.5px，則1rem=37.5px*/
#box1{width:10rem;height:2rem;font-size:0.5rem;}/*box1的寬度10rem則被計算成寬度爲375px，高度爲75px，文字大小爲18.25px；*/
#box1 .title{width:2rem;}/*title的寬度依舊相對於根元素計算，結果爲75px*/

　rem在移動端的適配網站

　　由上面的例子能夠看出，使用rem進行佈局的網站，咱們只須要修改根元素的font-size大小，則整個網頁的元素都可以按照預期進行等比例的計算和適配。spa

　　好比，在上面的例子中，咱們將html的font-size改成32px，那麼box1的樣式則變成了寬320px,高64px,文字大小則變爲16px;scala

　　也就是說，在開發過程當中，咱們只要基於一種寬度的設備使用rem進行佈局。而後使用js或css的media來根據寬度改變html的基礎font-size。就能夠適配各類移動端設備了。設計

　　步驟以下：調試

　　　　1）假設咱們拿到了一張750px寬度的設計圖。而且準備在iPhone6上進行調試，iphone6的屏幕寬度爲375px，他們的比例是2：1；

　　　　　　初始過程：

　　　　　　　　設置<meta content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"/>

　　　　　　　　設置html{font-size:37.5px} 　　

　　　　　　　　　　//爲何設置爲37.5px？你也能夠設置爲其它的值。但爲了易於換算和記憶，咱們默認爲每種屏幕設置他的基礎font-size=（屏幕寬度/10px）;

　　　　　　開發過程：將每一個元素設置的單位使用rem（任何本來使用px，em，pt的地方），數量爲（設計圖上的元素的實際px/2/37.5）rem；

　　　　　　...

　　　　　　好了，咱們的頁面已經開發完成了。

　　　　2）此時，咱們的頁面，在iPhone6下面，已是妥妥的了。那麼如何兼容其它不一樣寬度的移動設備呢？

　　　　　　思路：改變每種不一樣寬度的設備的根元素的css屬性，使其font-size值都爲設備寬度/10px。

　　　　　　方案1：在頁面頭部插入一段JS。 //爲何是頭部？--防止頁面閃爍

(function() {
    var newRem = function() {
        var html = document.documentElement;
        html.style.fontSize = html.getBoundingClientRect().width / 10 + 'px';
    };
    window.addEventListener('resize', newRem, false);
    newRem();
})();

　　　　　　方案2：在css文件中增長媒體查詢

@media (min-width: 320px){html{font-size: 32px;} }
@media (min-width: 360px){html{font-size: 36px;} }
@media (min-width: 375px){html{font-size: 37.5px;} }
@media (min-width: 384px){html{font-size: 38.5px;} }
@media (min-width: 414px){html{font-size: 41.4px;} }
@media (min-width: 448px){html{font-size: 44.8px;} }
@media (min-width: 480px){html{font-size: 48px;} }
@media (min-width: 512px){html{font-size: 51.2px;} }
@media (min-width: 544px){html{font-size: 54.4px;} }
@media (min-width: 576px){html{font-size: 57.6px;} }
@media (min-width: 608px){html{font-size: 60.8px;} }
@media (min-width: 640px){html{font-size: 64px;} }
@media (min-width: 750px){html{font-size: 75px;} }
@media (min-width: 800px){html{font-size: 80px;} }
@media (min-width: 1024px){html{font-size: 102.4px;} }