【轉載】rem自適應佈局-移動端自適應必備

時間 2019-11-17

標籤轉載 rem 自適應佈局移動必備欄目 CSS 简体版

原文原文鏈接

原文連接：rem自適應佈局-移動端自適應必備版權全部，轉載時請註明出處，違者必究。css

因爲移動端特殊性，本文講的是如何使用rem實現自適應，或叫rem響應式佈局，經過使用一個腳本就能夠rem自適應，不用再爲各類設備寬度不一樣而煩惱如何實現自適應的問題。html

rem是相對於根元素<html>，這樣就意味着，咱們只須要在根元素肯定一個px字號，則能夠來算出元素的寬高。1rem=16px(瀏覽器html的像素，能夠設定這個基準值），假如瀏覽器的html設爲64px，則下面的元素則1rem=64px來運算。·android

阿里團隊開源的一個庫。使用flexible.js輕鬆搞定各類不一樣的移動端設備兼容自適應問題。ios

實現方法：

經過js來調整html的字體大小，而在頁面中的製做稿則統一使用rem這個單位來製做。關鍵代碼以下：git

  1 ;(function(win, lib) {
  2     var doc = win.document;
  3     var docEl = doc.documentElement;
  4     var metaEl = doc.querySelector('meta[name="viewport"]');
  5     var flexibleEl = doc.querySelector('meta[name="flexible"]');
  6     var dpr = 0;
  7     var scale = 0;
  8     var tid;
  9     var flexible = lib.flexible || (lib.flexible = {});
 10     
 11     if (metaEl) {
 12         console.warn('將根據已有的meta標籤來設置縮放比例');
 13         var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/);
 14         if (match) {
 15             scale = parseFloat(match[1]);
 16             dpr = parseInt(1 / scale);
 17         }
 18     } else if (flexibleEl) {
 19         var content = flexibleEl.getAttribute('content');
 20         if (content) {
 21             var initialDpr = content.match(/initial\-dpr=([\d\.]+)/);
 22             var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/);
 23             if (initialDpr) {
 24                 dpr = parseFloat(initialDpr[1]);
 25                 scale = parseFloat((1 / dpr).toFixed(2));    
 26             }
 27             if (maximumDpr) {
 28                 dpr = parseFloat(maximumDpr[1]);
 29                 scale = parseFloat((1 / dpr).toFixed(2));    
 30             }
 31         }
 32     }
 33 
 34     if (!dpr && !scale) {
 35         var isAndroid = win.navigator.appVersion.match(/android/gi);
 36         var isIPhone = win.navigator.appVersion.match(/iphone/gi);
 37         var devicePixelRatio = win.devicePixelRatio;
 38         if (isIPhone) {
 39             // iOS下，對於2和3的屏，用2倍的方案，其他的用1倍方案
 40             if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {                
 41                 dpr = 3;
 42             } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
 43                 dpr = 2;
 44             } else {
 45                 dpr = 1;
 46             }
 47         } else {
 48             // 其餘設備下，仍舊使用1倍的方案
 49             dpr = 1;
 50         }
 51         scale = 1 / dpr;
 52     }
 53 
 54     docEl.setAttribute('data-dpr', dpr);
 55     if (!metaEl) {
 56         metaEl = doc.createElement('meta');
 57         metaEl.setAttribute('name', 'viewport');
 58         metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
 59         if (docEl.firstElementChild) {
 60             docEl.firstElementChild.appendChild(metaEl);
 61         } else {
 62             var wrap = doc.createElement('div');
 63             wrap.appendChild(metaEl);
 64             doc.write(wrap.innerHTML);
 65         }
 66     }
 67 
 68     function refreshRem(){
 69         var width = docEl.getBoundingClientRect().width;
 70         if (width / dpr > 540) {
 71             width = 540 * dpr;
 72         }
 73         var rem = width / 10;
 74         docEl.style.fontSize = rem + 'px';
 75         flexible.rem = win.rem = rem;
 76     }
 77 
 78     win.addEventListener('resize', function() {
 79         clearTimeout(tid);
 80         tid = setTimeout(refreshRem, 300);
 81     }, false);
 82     win.addEventListener('pageshow', function(e) {
 83         if (e.persisted) {
 84             clearTimeout(tid);
 85             tid = setTimeout(refreshRem, 300);
 86         }
 87     }, false);
 88 
 89     if (doc.readyState === 'complete') {
 90         doc.body.style.fontSize = 12 * dpr + 'px';
 91     } else {
 92         doc.addEventListener('DOMContentLoaded', function(e) {
 93             doc.body.style.fontSize = 12 * dpr + 'px';
 94         }, false);
 95     }
 96     
 97 
 98     refreshRem();
 99 
100     flexible.dpr = win.dpr = dpr;
101     flexible.refreshRem = refreshRem;
102     flexible.rem2px = function(d) {
103         var val = parseFloat(d) * this.rem;
104         if (typeof d === 'string' && d.match(/rem$/)) {
105             val += 'px';
106         }
107         return val;
108     }
109     flexible.px2rem = function(d) {
110         var val = parseFloat(d) / this.rem;
111         if (typeof d === 'string' && d.match(/px$/)) {
112             val += 'rem';
113         }
114         return val;
115     }
116 
117 })(window, window['lib'] || (window['lib'] = {}));

從上面的代碼，主要是改變了dpx和document的font-size大小。大小爲docEl.getBoundingClientRect().width / 10 + 'px';github

假設咱們的設計稿寬是640的，則html的字體大小則被設爲64px.則至關於1rem=64px。npm

假如一個元素的寬是160px,在平時，咱們能夠採用百分比能夠作到自適應，假如使用響應式的話，可能須要設置多個，好比在320px，輸出80px，而在640px輸出160px等。瀏覽器

而採用以上rem的方法，則只須要輸出2.5rem就能實現統一，以下表格：sass

設備寬度	320px	360px	414px	640px
Html字體大小	32px	36px	41.4px	64px
實際輸出	1rem	1rem	1rem	1rem
設計稿縮放大小	80px	90px	103.5px	160px
實際輸出	2.5rem	2.5rem	2.5rem	2.5rem

以上的2.5rem是怎麼得出的呢？app

160/64（1rem的基數爲64px）=2.5rem;按照官方的說法（750px舉例）

Flexible會將視覺稿分紅100份（主要爲了之後能更好的兼容vh和vw），而每一份被稱爲一個單位a。同時1rem單位被認定爲10a。針對咱們這份視覺稿能夠計算出：

1a   = 7.5px
1rem = 75px

那麼咱們這個示例的稿子就分紅了10a，也就是整個寬度爲10rem，<html>對應的font-size爲75px：

這樣一來，對於視覺稿上的元素尺寸換算，只須要原始的px值除以rem基準值便可。例如此例視覺稿中的圖片，其尺寸是176px * 176px,轉換成爲2.346667rem * 2.346667rem。

另外大漠還寫了一篇詳細的文章：使用Flexible實現手淘H5頁面的終端適配裏面介紹了一個如何快速轉換rem爲px的幾種方法，感興趣的童鞋能夠去看看。

也能夠看這篇文章：Sass函數功能——rem轉px

另外在使用這個來處理自適應的另外一個坑就是css sprite，做者的建議是使用svg，或者icon font.或者base64等其餘方案。

另外就是在dpr=2時，小圖片可能會出現模糊，建議以最大的圖片來切圖。

字體建議使用px

在做者的觀點中，是建議描述性的字體使用px，若是有slogan之類大於48px的，能夠使用rem，因爲使用rem在iPhone5和iPhone6中字體不一樣，可能出現13px和15px,點陣字體。

顯然，咱們在iPhone3G和iPhone4的Retina屏下面，但願看到的文本字號是相同的。也就是說，咱們不但願文本在Retina屏幕下變小，另外，咱們但願在大屏手機上看到更多文本，以及，如今絕大多數的字體文件都自帶一些點陣尺寸，一般是16px和24px，因此咱們不但願出現13px和15px這樣的奇葩尺寸。

如此一來，就決定了在製做H5的頁面中，rem並不適合用到段落文本上。因此在Flexible整個適配方案中，考慮文本仍是使用px做爲單位。只不過使用[data-dpr]屬性來區分不一樣dpr下的文本字號大小。
div {
    width: 1rem; 
    height: 0.4rem;
    font-size: 12px; // 默認寫上dpr爲1的fontSize
}
[data-dpr="2"] div {
    font-size: 24px;
}
[data-dpr="3"] div {
    font-size: 36px;
}
爲了能更好的利於開發，在實際開發中，咱們能夠定製一個font-dpr()這樣的Sass混合宏：
@mixin font-dpr($font-size){
    font-size: $font-size;

    [data-dpr="2"] & {
        font-size: $font-size * 2;
    }

    [data-dpr="3"] & {
        font-size: $font-size * 3;
    }
}
有了這樣的混合宏以後，在開發中能夠直接這樣使用：
@include font-dpr(16px);
固然這只是針對於描述性的文本，好比說段落文本。但有的時候文本的字號也須要分場景的，好比在項目中有一個slogan,業務方但願這個slogan能根據不一樣的終端適配。針對這樣的場景，徹底能夠使用rem給slogan作計量單位。