前置知識(shí)：

物理像素(physical pixel，device pixel)

物理像素（設(shè)備像素），顯示設(shè)備中一個(gè)最微小的物理部件。每個(gè)像素可以根據(jù)操作系統(tǒng)設(shè)置自己的顏色和亮度。

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

設(shè)備獨(dú)立像素（密度獨(dú)立性像素），可以認(rèn)為是計(jì)算機(jī)坐標(biāo)系統(tǒng)中的一個(gè)點(diǎn)，這個(gè)點(diǎn)代表一個(gè)可以由程序使用的虛擬像素(比如說(shuō)CSS像素)，然后由相關(guān)系統(tǒng)轉(zhuǎn)換為物理像素。dip或dp,（device independent pixels，設(shè)備獨(dú)立像素）與屏幕密度有關(guān)。dip可以用來(lái)輔助區(qū)分視網(wǎng)膜設(shè)備還是非視網(wǎng)膜設(shè)備。

CSS像素

CSS像素是一個(gè)抽像的單位，主要使用在瀏覽器上，用來(lái)精確度量Web頁(yè)面上的內(nèi)容。一般情況之下，CSS像素稱為 與設(shè)備無(wú)關(guān)的像素(device-independent pixel)，簡(jiǎn)稱DIPs。

屏幕密度ppi （pixel per inch）：

屏幕密度是指一個(gè)設(shè)備表面上存在的像素?cái)?shù)量，表示每英寸所包含的像素點(diǎn)數(shù)目，數(shù)值越高，說(shuō)明屏幕能以更高密度顯示圖像

計(jì)算公式——

ppi在120-160之間的手機(jī)被歸為低密度手機(jī)，160-240被歸為中密度，240-320被歸為高密度，320以上被歸為超高密度（例如蘋(píng)果公司的Retina顯示屏）

設(shè)備像素比(device pixel ratio)

設(shè)備像素比簡(jiǎn)稱為dpr，其定義了物理像素和設(shè)備獨(dú)立像素的對(duì)應(yīng)關(guān)系。它的值可以按下面的公式計(jì)算得到：

設(shè)備像素比 ＝ 物理像素（設(shè)備像素） / 設(shè)備獨(dú)立像素

在JavaScript中，可以通過(guò)window.devicePixelRatio獲取到當(dāng)前設(shè)備的dpr。

在CSS中，可以通過(guò)-webkit-device-pixel-ratio，-webkit-min-device-pixel-ratio和?-webkit-max-device-pixel-ratio進(jìn)行媒體查詢，對(duì)不同dpr的設(shè)備，做一些樣式適配(這里只針對(duì)webkit內(nèi)核的瀏覽器和webview)。

?

總結(jié)：

CSS像素（CSS Pixel）：適用于web編程，指的是我們?cè)跇邮酱a中使用到的邏輯像素，是一個(gè)抽象概念，實(shí)際并不存在

設(shè)備獨(dú)立像素（Device Independent Pixel）：與設(shè)備無(wú)關(guān)的邏輯像素，獨(dú)立于設(shè)備的用于邏輯上衡量像素的單位，代表可以通過(guò)程序控制使用的虛擬像素，是一個(gè)總體概念，包括了CSS像素

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

?

移動(dòng)端適配

淘寶方法：

（1）動(dòng)態(tài)設(shè)置viewport的scale，通過(guò)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）動(dòng)態(tài)計(jì)算html的font-size

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

（3）布局的時(shí)候，各元素的css尺寸=設(shè)計(jì)稿標(biāo)注尺寸/(設(shè)計(jì)稿橫向分辨率/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）當(dāng)deviceWidth大于540時(shí)，則物理分辨率大于1080（這就看設(shè)備的devicePixelRatio這個(gè)值了），應(yīng)該去訪問(wèn)pc網(wǎng)站了

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

?

?根據(jù)此思路：手淘團(tuán)隊(duì)提供一個(gè)開(kāi)源的解決方案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) { // 判斷頁(yè)面中是否設(shè)置 meta[name="viewport"]，若設(shè)置了，則按照設(shè)置的值縮放 12 console.warn('將根據(jù)已有的meta標(biāo)簽來(lái)設(shè)置縮放比例'); 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) { // 判斷頁(yè)面中是否設(shè)置 meta[name="flexible"]，若設(shè)置了，則按照設(shè)置的值縮放 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下，對(duì)于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 // 其他設(shè)備下，仍舊使用1倍的方案 49 dpr = 1; 50 } 51 scale = 1 / dpr; 52 } 53 // 設(shè)置data-dpr屬性為通過(guò)不同機(jī)型和devicePixelRatio計(jì)算出的設(shè)備像素比 54 docEl.setAttribute('data-dpr', dpr); 55 56 // 根據(jù)計(jì)算出的數(shù)值創(chuàng)建并初始化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 // 目前主流手機(jī)最大的css像素尺寸，是540（比如devicePixelRatio為2，分辨率是1080x1920的手機(jī)）， 73 // 所以用了這個(gè)經(jīng)驗(yàn)值。這樣可以讓在ipad橫屏這種情況下瀏覽無(wú)線頁(yè)面，不至于因?yàn)槔爝m配后體驗(yàn)太差 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 // 對(duì)于opera和火狐瀏覽器，pageshow這個(gè)事件會(huì)在 后退/前進(jìn) 這兩個(gè)動(dòng)作是也觸發(fā)， 87 // 而load事件因?yàn)轫?yè)面已經(jīng)被加載過(guò)，被保存在緩存里，就不會(huì)觸發(fā)了 88 win.addEventListener('pageshow', function(e) { 89 if (e.persisted) { 90 clearTimeout(tid); 91 tid = setTimeout(refreshRem, 300); 92 } 93 }, false); 94 95 // 在 jQuery 中經(jīng)常使用的 $(document).ready(function() { // ...代碼... }); 其實(shí)監(jiān)聽(tīng)的就是 DOMContentLoaded 事件， 96 // 當(dāng)初始的 HTML 文檔被完全加載和解析完成之后，DOMContentLoaded 事件被觸發(fā) 97 // （即：當(dāng)文檔中沒(méi)有腳本時(shí)，瀏覽器解析完文檔便能觸發(fā) DOMContentLoaded 事件；如果文檔中包含腳本，則腳本會(huì)阻塞文檔的解析，而腳本需要等位于腳本前面的css加載完才能執(zhí)行） 98 // 事件 load 應(yīng)該僅用于檢測(cè)一個(gè)完全加載的頁(yè)面。（包括圖片、音頻等其他資源） 99 // $(document).load(function() { // ...代碼... }); 監(jiān)聽(tīng)的是 load 事件 100 // onload事件所有的瀏覽器都支持, JS中window.onload = function(){} 101 102 // doc.body.style.fontSize = 12 * dpr + 'px' 為了重置頁(yè)面中的字體默認(rèn)值，不然會(huì)繼承html上的font-size，變得很大 103 if (doc.readyState === 'complete') { // readyState 屬性返回當(dāng)前文檔的狀態(tài) 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的工具函數(shù) 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

?

轉(zhuǎn)載于:https://www.cnblogs.com/136asdxxl/p/6891462.html

總結(jié)

以上是生活随笔為你收集整理的移动端适配 rem的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。