JS動態計算移動端rem的解決方案

時間 2019-11-20

原文原文鏈接

首先介紹下remcss

提及rem就的說px，em；html

PX爲單位

在Web頁面初期製做中，咱們都是使用「px」來設置咱們的文本，由於他比較穩定和精確。可是這種方法存在一個問題，當用戶在瀏覽器中瀏覽咱們製做的Web頁面時，他改變了瀏覽器的字體大小，這時會使用咱們的Web頁面佈局被打破。這樣對於那些關心本身網站可用性的用戶來講，就是一個大問題了。所以，這時就提出了使用「em」來定義Web頁面的字體。android

em爲單位 font size of the element

前面也說了，使用是「px」爲單位是比較方便，而又一致，但在瀏覽器中放大或縮放瀏覽頁面時會存在一個問題，要解決這個問題，咱們可使用「em」單位。Richard Rutter'在《How to size text using ems》一文中有作過詳細的介紹，追至早一點，Richard Rutter也在《How to Size Text in CSS》中進行過深刻的剖析。css3

這種技術須要一個參考點，通常都是以<body>的「font-size」爲基準。好比說咱們使用「1em」等於「10px」來改變默認值「1em=16px」，這樣一來，咱們設置字體大小至關於「14px」時，只須要將其值設置爲「1.4em」。web

 1 body {
 2     font - size: 62.5 % ; /*10 ÷ 16 × 100% = 62.5%*/
 3 }
 4 h1 {
 5     font - size: 2.4e m; /*2.4em × 10 = 24px */
 6 }
 7 p {
 8     font - size: 1.4e m; /*1.4em × 10 = 14px */
 9 }
10 li {
11     font - size: 1.4e m; /*1.4 × ? = 14px ? */
12 }

爲何「li」的「1.4em」是否是「14px」將是一個問號呢？若是你瞭解過「em」後，你會以爲這個問題是多問的。前面也簡單的介紹過一回，在使用「em」做單位時，必定須要知道其父元素的設置，由於「em」就是一個相對值，並且是一個相對於父元素的值，其真正的計算公式是：瀏覽器

因此em：1 ÷ 父元素的font-size × 須要轉換的像素值 = em值app

這樣的狀況下「1.4em」能夠是「14px」,也能夠是「20px」，或者說是「24px」，總之是一個不肯定值，那麼解決這樣的問題，要麼你知道其父元素的值，要麼呢在任何子元素中都使用「1em」。這樣一來可能又不是咱們所須要的方法。iphone

Rem爲單位 font size of the root element

CSS3的出現，他同時引進了一些新的單位，包括咱們今天所說的rem。佈局

咱們來看一個簡單的代碼實例：字體

1 html { font - size: 62.5 % ; /*10 ÷ 16 × 100% = 62.5%*/ }
2 body { font - size: 1.4 rem; /*1.4 × 10px = 14px */ }
3 h1 { font - size: 2.4 rem; /*2.4 × 10px = 24px*/ }

我在根元素<html>中定義了一個基本字體大小爲62.5%（也就是10px。設置這個值主要方便計算，若是沒有設置，將是以「16px」爲基準）。從上面的計算結果，咱們使用「rem」就像使用「px」同樣的方便，並且同時解決了「px」和「em」二者不一樣之處。

那麼在rem的計算上，咱們能夠用：

 1 html {
 2     font - size: 20 px;
 3 }
 4 @media only screen and(min - width: 401 px) {
 5     html {
 6         font - size: 25 px!important;
 7     }
 8 }
 9 @media only screen and(min - width: 428 px) {
10     html {
11         font - size: 26.75 px!important;
12     }
13 }
14 @media only screen and(min - width: 481 px) {
15     html {
16         font - size: 30 px!important;
17     }
18 }
19 @media only screen and(min - width: 569 px) {
20     html {
21         font - size: 35 px!important;
22     }
23 }
24 @media only screen and(min - width: 641 px) {
25     html {
26         font - size: 40 px!important;
27     }
28 }

也能夠

;
(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) {
        //將根據已有的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'] = {}));