前置知識：

物理像素(physical pixel，device pixel)

物理像素（設備像素），顯示設備中一個最微小的物理部件。每個像素可以根據操作系統設置自己的顏色和亮度。

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

設備獨立像素（密度獨立性像素），可以認為是計算機坐標系統中的一個點，這個點代表一個可以由程序使用的虛擬像素(比如說CSS像素)，然后由相關系統轉換為物理像素。dip或dp,（device independent pixels，設備獨立像素）與屏幕密度有關。dip可以用來輔助區分視網膜設備還是非視網膜設備。

CSS像素

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

屏幕密度ppi （pixel per inch）：

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

計算公式——

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)。

?

總結：

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

?

轉載于:https://www.cnblogs.com/136asdxxl/p/6891462.html

總結

以上是生活随笔為你收集整理的移动端适配 rem的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。