移動端適配 rem

時間 2019-11-18

標籤移動適配 rem 欄目無線简体版

原文原文鏈接

前置知識：css

物理像素(physical pixel，device pixel)

物理像素（設備像素），顯示設備中一個最微小的物理部件。每一個像素能夠根據操做系統設置本身的顏色和亮度。html

設備獨立像素(density-independent pixel，device-independent pixel，DIP／DP／dips)

設備獨立像素（密度獨立性像素），能夠認爲是計算機座標系統中的一個點，這個點表明一個能夠由程序使用的虛擬像素(好比說CSS像素)，而後由相關係統轉換爲物理像素。dip或dp,（device independent pixels，設備獨立像素）與屏幕密度有關。dip能夠用來輔助區分視網膜設備仍是非視網膜設備。android

CSS像素

CSS像素是一個抽像的單位，主要使用在瀏覽器上，用來精確度量Web頁面上的內容。通常狀況之下，CSS像素稱爲與設備無關的像素(device-independent pixel)，簡稱DIPs。git

屏幕密度ppi （pixel per inch）：

屏幕密度是指一個設備表面上存在的像素數量，表示每英寸所包含的像素點數目，數值越高，說明屏幕能以更高密度顯示圖像github

計算公式——web

ppi在120-160之間的手機被歸爲低密度手機，160-240被歸爲中密度，240-320被歸爲高密度，320以上被歸爲超高密度（例如蘋果公司的Retina顯示屏）編程

設備像素比(device pixel ratio)

設備像素比簡稱爲dpr，其定義了物理像素和設備獨立像素的對應關係。它的值能夠按下面的公式計算獲得：瀏覽器

設備像素比 ＝ 物理像素（設備像素） / 設備獨立像素

在JavaScript中，能夠經過window.devicePixelRatio獲取到當前設備的dpr。緩存

在CSS中，能夠經過-webkit-device-pixel-ratio，-webkit-min-device-pixel-ratio和 -webkit-max-device-pixel-ratio進行媒體查詢，對不一樣dpr的設備，作一些樣式適配(這裏只針對webkit內核的瀏覽器和webview)。app

總結：

CSS像素（CSS Pixel）：適用於web編程，指的是咱們在樣式代碼中使用到的邏輯像素，是一個抽象概念，實際並不存在

設備獨立像素（Device Independent Pixel）：與設備無關的邏輯像素，獨立於設備的用於邏輯上衡量像素的單位，表明能夠經過程序控制使用的虛擬像素，是一個整體概念，包括了CSS像素

設備像素（Device Pixel）：物理像素，設備能控制顯示的最小單位，咱們常說的1920×1080像素分辨率就是用的設備像素單位

移動端適配

淘寶方法：

（1）動態設置viewport的scale，經過js

var scale = 1 / devicePixelRatio;
document.querySelector('meta[name="viewport"]').setAttribute('content','initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');

（2）動態計算html的font-size

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

（3）佈局的時候，各元素的css尺寸=設計稿標註尺寸/(設計稿橫向分辨率/10);

（4）font-size可能須要額外的媒介查詢，font-size不建議使用rem。

@media screen and (max-width:321px){
    .m-navlist{font-size:15px}
}

@media screen and (min-width:321px) and (max-width:400px){
    .m-navlist{font-size:16px}
}

@media screen and (min-width:400px){
    .m-navlist{font-size:18px}
}

（5）當deviceWidth大於540時，則物理分辨率大於1080（這就看設備的devicePixelRatio這個值了），應該去訪問pc網站了

var deviceWidth = document.documentElement.clientWidth; 
if(deviceWidth > 540) deviceWidth = 540; 
document.documentElement.style.fontSize = deviceWidth / 10 + 'px';

根據此思路：手淘團隊提供一個開源的解決方案flexible.js

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

本身理解加以註釋版本：

  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) { // 判斷頁面中是否設置 meta[name="viewport"]，若設置了，則按照設置的值縮放
 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) { // 判斷頁面中是否設置 meta[name="flexible"]，若設置了，則按照設置的值縮放
 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) { // meta[name="viewport"]和 meta[name="flexible"]都不存在
 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倍和3倍的方案，其他的用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     // 設置data-dpr屬性爲經過不一樣機型和devicePixelRatio計算出的設備像素比
 54     docEl.setAttribute('data-dpr', dpr);
 55 
 56     // 根據計算出的數值建立並初始化meta元素，並加入文檔中
 57     if (!metaEl) {
 58         metaEl = doc.createElement('meta');
 59         metaEl.setAttribute('name', 'viewport');
 60         metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
 61         if (docEl.firstElementChild) {
 62             docEl.firstElementChild.appendChild(metaEl);
 63         } else {
 64             var wrap = doc.createElement('div');
 65             wrap.appendChild(metaEl);
 66             doc.write(wrap.innerHTML);
 67         }
 68     }
 69 
 70     function refreshRem() {
 71         var width = docEl.getBoundingClientRect().width;
 72         // 目前主流手機最大的css像素尺寸，是540（好比devicePixelRatio爲2，分辨率是1080x1920的手機），
 73         // 因此用了這個經驗值。這樣可讓在ipad橫屏這種狀況下瀏覽無線頁面，不至於由於拉伸適配後體驗太差
 74         if (width / dpr > 540) {
 75             width = 540 * dpr;
 76         }
 77         var rem = width / 10;
 78         docEl.style.fontSize = rem + 'px';
 79         flexible.rem = win.rem = rem;
 80     }
 81 
 82     win.addEventListener('resize', function() {
 83         clearTimeout(tid);
 84         tid = setTimeout(refreshRem, 300);
 85     }, false);
 86     // 對於opera和火狐瀏覽器，pageshow這個事件會在 後退/前進 這兩個動做是也觸發，
 87     // 而load事件由於頁面已經被加載過，被保存在緩存裏，就不會觸發了
 88     win.addEventListener('pageshow', function(e) {
 89         if (e.persisted) {
 90             clearTimeout(tid);
 91             tid = setTimeout(refreshRem, 300);
 92         }
 93     }, false);
 94 
 95     // 在 jQuery 中常常使用的 $(document).ready(function() { // ...代碼... }); 其實監聽的就是 DOMContentLoaded 事件， 
 96     // 當初始的 HTML 文檔被徹底加載和解析完成以後，DOMContentLoaded 事件被觸發
 97     // （即：當文檔中沒有腳本時，瀏覽器解析完文檔便能觸發 DOMContentLoaded 事件；若是文檔中包含腳本，則腳本會阻塞文檔的解析，而腳本須要等位於腳本前面的css加載完才能執行）
 98     // 事件 load 應該僅用於檢測一個徹底加載的頁面。（包括圖片、音頻等其餘資源）
 99     // $(document).load(function() { // ...代碼... }); 監聽的是 load 事件
100     // onload事件全部的瀏覽器都支持, JS中window.onload = function(){}
101 
102     // doc.body.style.fontSize = 12 * dpr + 'px' 爲了重置頁面中的字體默認值，否則會繼承html上的font-size，變得很大
103     if (doc.readyState === 'complete') { // readyState 屬性返回當前文檔的狀態 complete=>載入完成
104         doc.body.style.fontSize = 12 * dpr + 'px';
105     } else {
106         doc.addEventListener('DOMContentLoaded', function(e) {
107             doc.body.style.fontSize = 12 * dpr + 'px';
108         }, false);
109     }
110 
111 
112     refreshRem();
113 
114     flexible.dpr = win.dpr = dpr;
115     flexible.refreshRem = refreshRem;
116     // flexible的工具函數
117     flexible.rem2px = function(d) {
118         var val = parseFloat(d) * this.rem;
119         if (typeof d === 'string' && d.match(/rem$/)) {
120             val += 'px';
121         }
122         return val;
123     }
124 
125     flexible.px2rem = function(d) {
126         var val = parseFloat(d) / this.rem;
127         if (typeof d === 'string' && d.match(/px$/)) {
128             val += 'rem';
129         }
130         return val;
131     }
132 
133 })(window, window['lib'] || (window['lib'] = {}));

View Code

相關標籤/搜索

每日一句

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