rem佈局原理深度理解（以及em/vw/vh）

時間 2019-12-14

標籤 rem 佈局原理深度理解以及欄目 CSS 简体版

原文原文鏈接

1、前言css

　　咱們h5項目終端適配採用的是淘寶那套《Flexible實現手淘H5頁面的終端適配》方案。主要原理是rem佈局。最近和別人談彈性佈局原理，發現雖然已經使用了那套方案好久，可是本身對rem的理解很含糊，包括vw、vh等。因此打算寫博客總結一下，以加深理解。html

2、幾個概念android

　　這裏就不講那些，物理像素、設備像素比了，能夠本身查閱。要去理解rem/em/vm/vh等，首先要直觀的去理解他們究竟是什麼？理解好了，後面就好辦了。其實這幾個都是css單位，就像咱們經常使用的px同樣，只不過他們都是相對單位。我平時使用的百分比單位如：width:100%;就是相對單位。git

　　2.一、emgithub

　　em做爲font-size的單位時，其表明父元素的字體大小，em做爲其餘屬性單位時，表明自身字體大小——MDNweb

　　好比父元素font-size:12px;瀏覽器

　　自身元素若是寫成：font-sise:2em;則自身元素用px表示就是24px（相對父元素字體大小）;app

　　可是自身元素設置：width:2rem,那麼自身元素用px表示就是48px（相對自身字體大小）；dom

2.二、remiphone

　　rem做用於非根元素時，相對於根元素字體大小；rem做用於根元素字體大小時，相對於其出初始字體大小——MDN

　　好比根元素（html）設置font-size=12px; 非根元素設置width:2rem;則換成px表示就是24px；

　　若是根元素設置成font-size=1rem;則根元素換成px就是相對於初始字體大小，通常是12px；

　　2.三、vm/vh

　　vw ：視口寬度的 1/100；vh ：視口高度的 1/100 —— MDN

　　在pc端，視口寬高就是瀏覽器得寬高；

　　在移動端，這個還不太同樣，不過通常設置：　

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

　　代碼以顯示網頁的屏幕寬度定義了視窗寬度。網頁的比例和最大比例被設置爲100%。

3、剖析rem佈局原理

　　其實好好理解上面的概念，rem的原理也就很簡單了。

　　假設咱們將屏幕平局分爲10份，每一份寬度用一個a表示，即a=屏幕寬度/10;那麼：

div{width: 5a} /* 屏幕寬度的50% */

可是css中沒有a這個單位啊？那怎麼辦呢？對，css不是有相對單位rem麼？咱們全能夠實現藉助rem代替上面的a。如：

html {font-size: 12px}
div {width: 2rem} /* 24px*/

html {font-size: 16px}
div {width: 2rem} /* 32px*/

那麼問題來了？怎麼讓html元素字體大小恆等於屏幕的1/10呢？如ipone6寬是375px,font-size:37.5px;

html {fons-size: width / 10}
div {width: 5rem} /* 5rem = 5a = 屏幕寬度的50% */

咱們用js很容易動態的設置html的font-size恆等屏幕的1/10;咱們能夠在頁面dom ready、resize和屏幕旋轉中設置：

document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';

如何把設計稿的像素單位換成以rem爲單位呢？能夠用一個比例來計算：如設計稿寬度爲750px，某個元素量得75px，那麼：

75px/750px = 計算所得rem/10rem,因此計算所得rem=75px;因此咱們在樣式中寫width:1rem；實際寬度是75px；同理，若是設計稿總寬度是640px,則1rem=64px。

預處理函數能夠簡化：

$ue-width: 750; /* 設計稿圖的寬度 */

@function px2rem($px) {
  @return #{$px/$ue-width*10}rem;
}

div {
  width: px2rem(100);/*編譯後：  p{width:1.5625rem}*/
}

4、rem萬能嗎？

　　rem是一種彈性佈局，它強調等比縮放，100%還原。它和響應式佈局不同，響應式佈局強調不一樣屏幕要有不一樣的顯示，好比媒體查詢。

　　字體並不合適使用rem, 字體的大小和字體寬度，並不成線性關係，因此字體大小不能使用rem；因爲設置了根元素字體的大小，會影響全部沒有設置字體大小的元素，由於字體大小是會繼承的，難道要每一個元素都顯示設置字體大小？

　　咱們能夠在body上作字體修正，好比把body字體大小設置爲16px，但若是用戶本身設置了更大的字體，此時用戶的設置將失效，好比合理的方式是，將其設置爲用戶的默認字體大小:　　

html {fons-size: width / 10}
body {font-size: 16px}

　　那字體咋整？咱們能夠用媒體查詢和em來實現：　

@media screen and (min-width: 320px) {
	body {font-size: 16px}
}
@media screen and (min-width: 481px) and (max-width:640px) {
	body {font-size: 18px}
}
@media screen and (min-width: 641px) {
	body {font-size: 20px}
}

div {font-size: 1.2em}

　　在製做H5的頁面中，rem並不適合用到段落文本上。因此在Flexible整個適配方案中，考慮文本仍是使用px做爲單位。只不過使用[data-dpr]屬性來區分不一樣dpr下的文本字號大小。

.selector {
    width: 2rem;
    border: 1px solid #ddd;
}
[data-dpr="1"] .selector {
    font-size: 14px;
}
[data-dpr="2"] .selector {
    font-size: 28px;
}
[data-dpr="3"] .selector {
    font-size: 42px;
}

　　固然你也能夠給非根元素設置合適的字體。

5、rem佈局方案

　　從上能夠看出最好的彈性佈局方案就是rem+js的方案，《Flexible實現手淘H5頁面的終端適配》就是採用rem+js實現的。flexible主要作了幾點。

動態改寫<meta>標籤
給<html>元素添加data-dpr屬性，而且動態改寫data-dpr的值。
給<html>元素添加font-size屬性，而且動態改寫font-size的值

　　https://github.com/amfe/lib-flexible：

;(function(win, lib) {
    var doc = win.document;
    var docEl = doc.documentElement;
    var metaEl = doc.querySelector('meta[name="viewport"]');
    var flexibleEl = doc.querySelector('meta[name="flexible"]');
    var dpr = 0;
    var scale = 0;
    var tid;
    var flexible = lib.flexible || (lib.flexible = {});
    
    if (metaEl) {
        console.warn('將根據已有的meta標籤來設置縮放比例');
        var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/);
        if (match) {
            scale = parseFloat(match[1]);
            dpr = parseInt(1 / scale);
        }
    } else if (flexibleEl) {
        var content = flexibleEl.getAttribute('content');
        if (content) {
            var initialDpr = content.match(/initial\-dpr=([\d\.]+)/);
            var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/);
            if (initialDpr) {
                dpr = parseFloat(initialDpr[1]);
                scale = parseFloat((1 / dpr).toFixed(2));    
            }
            if (maximumDpr) {
                dpr = parseFloat(maximumDpr[1]);
                scale = parseFloat((1 / dpr).toFixed(2));    
            }
        }
    }
    if (!dpr && !scale) {
        var isAndroid = win.navigator.appVersion.match(/android/gi);
        var isIPhone = win.navigator.appVersion.match(/iphone/gi);
        var devicePixelRatio = win.devicePixelRatio;
        if (isIPhone) {
            // iOS下，對於2和3的屏，用2倍的方案，其他的用1倍方案
            if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {                
                dpr = 3;
            } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
                dpr = 2;
            } else {
                dpr = 1;
            }
        } else {
            // 其餘設備下，仍舊使用1倍的方案
            dpr = 1;
        }
        scale = 1 / dpr;
    }
    docEl.setAttribute('data-dpr', dpr);
    if (!metaEl) {
        metaEl = doc.createElement('meta');
        metaEl.setAttribute('name', 'viewport');
        metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
        if (docEl.firstElementChild) {
            docEl.firstElementChild.appendChild(metaEl);
        } else {
            var wrap = doc.createElement('div');
            wrap.appendChild(metaEl);
            doc.write(wrap.innerHTML);
        }
    }
    function refreshRem(){
        var width = docEl.getBoundingClientRect().width;
        if (width / dpr > 540) {
            width = 540 * dpr;
        }
        var rem = width / 10;
        docEl.style.fontSize = rem + 'px';
        flexible.rem = win.rem = rem;
    }
    win.addEventListener('resize', function() {
        clearTimeout(tid);
        tid = setTimeout(refreshRem, 300);
    }, false);
    win.addEventListener('pageshow', function(e) {
        if (e.persisted) {
            clearTimeout(tid);
            tid = setTimeout(refreshRem, 300);
        }
    }, false);
    if (doc.readyState === 'complete') {
        doc.body.style.fontSize = 12 * dpr + 'px';
    } else {
        doc.addEventListener('DOMContentLoaded', function(e) {
            doc.body.style.fontSize = 12 * dpr + 'px';
        }, false);
    }
    
    refreshRem();
    flexible.dpr = win.dpr = dpr;
    flexible.refreshRem = refreshRem;
    flexible.rem2px = function(d) {
        var val = parseFloat(d) * this.rem;
        if (typeof d === 'string' && d.match(/rem$/)) {
            val += 'px';
        }
        return val;
    }
    flexible.px2rem = function(d) {
        var val = parseFloat(d) / this.rem;
        if (typeof d === 'string' && d.match(/px$/)) {
            val += 'rem';
        }
        return val;
    }
})(window, window['lib'] || (window['lib'] = {}));

6、em能夠用來作彈性佈局嗎？

　　上面知道，一旦某個節點的字體大小發生變化，其餘節點也隨之變化，因此不合適，可是用來處理字體仍是絕妙的。

7、vw/wh用來作彈性佈局怎麼樣？

　　根據上面說，vw —— 視口寬度的 1/100；vh —— 視口高度的 1/100；感受已經不用多說了。

/* rem方案 */
html {font-size: width / 10}
p {width: 1.5625rem}

/* vw方案 */
p {width: 15.625vw}

若是rem方案中使用設置font-size=width/100就和vm意思同樣，可是好比font-size:640px/100;瀏覽器不會識別6.4px這麼小的字體的。

若是不考慮兼容性問題，能夠大膽使用vw/vm作彈性的佈局。

8、網易考拉觸屏版的js+rem的彈性佈局方式

其實它能夠在body設置一個默認的字體大小的。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。