如何利用rem在移動端不一樣設備上讓字體自適應大小

時間 2019-12-16

原文原文鏈接

rem由來：font size of the root element，那麼rem是個單位，單位大小由它第一代老祖宗的font-size的大小決定。如今前端碼農們爲了能在各個屏幕上看到一個健康的網頁在默默的犧牲着本身的健康，由於不只要知道rem是個單位，更重要的是要知道怎麼能在不一樣分辨率下呈現的頁面都很NB。javascript

事故形成緣由：
1.px單位在PC上很流行，在手機屏幕上一看，MLGB的，一樣的12px卻小的跟螞蟻似的。
2.好不容易在iPhone4上調的正常了，換個菊花牌手機，MBD不堪入目了。
3.知道了rem的用法，可是html的font-size究竟是多少才合適啊啊啊，媽蛋~。css

好了，那麼如今來解決這些問題。
在解決以前，麻煩各位大嬸要了解一些你可能不想了解的東東（警告：不瞭解這些就不能知道真相喲~）：
1.物理像素(physical pixel)
咱們看到的每一個屏幕都是由一顆顆咱們肉眼難以看到的小顆粒（物理像素）組成的。html

2.邏輯像素
是計算機座標系統中的一個點，這個點表明一個能夠由程序使用的虛擬像素(好比說CSS像素)。前端

3.設備的像素比(device pixel ratio)簡稱DPR
它的數值體現了物理像素和邏輯像素之間的關係，用公式能夠計算出該設備的DPR的大小：java

DPR = 物理像素 / 邏輯像素

那麼瞭解了上面這些概念，就能夠知道，爲何css在pc上寫着font-size=12px;可是換到手機上卻變小了？由於DPR啊啊啊，大哥~。
沒錯，咱們在電腦屏幕上的DPR是1，可是手機卻不一樣，多是它多是2，也多是3。獲取設備DPR的方法仍是有的：
1.在JavaScript中，經過window.devicePixelRatio來獲取
2.在css中，能夠經過-webkit-device-pixel-ratio，-webkit-min-device-pixel-ratio和 -webkit-max-device-pixel-ratio進行媒體查詢，對不一樣DPR的設備，作一些樣式適配(這裏只針對webkit內核的瀏覽器和webview)。android

本人也在網上看了很多動態設置rem的文章，下面把幾個經常使用的列舉出來：一，用媒體查詢來設置html的font-size：web

@media screen and (min-width: 320px) { html {font-size: 14px;} } @media screen and (min-width: 360px) { html {font-size: 16px;} } @media screen and (min-width: 400px) { html {font-size: 18px;} } @media screen and (min-width: 440px) { html {font-size: 20px;} } @media screen and (min-width: 480px) { html {font-size: 22px;} } @media screen and (min-width: 640px) { html {font-size: 28px;} }

2、利用js來動態設置瀏覽器

!(function(doc, win) { var docEle = doc.documentElement, evt = "onorientationchange" in window ? "orientationchange" : "resize", fn = function() { var width = docEle.clientWidth; width && (docEle.style.fontSize = 20 * (width / 320) + "px"); }; win.addEventListener(evt, fn, false); doc.addEventListener("DOMContentLoaded", fn, false); }(document, window));

我要說的是最後一種，也是我認爲目前比較好的實現方法：
利用js計算當前設備的DPR，動態設置在html標籤上，並動態設置html的font-size，利用css的選擇器根據DPR來設置不一樣DPR下的字體大小（這個方法很不錯哦~）緩存

!function(win, lib) { var timer, doc = win.document, docElem = doc.documentElement, vpMeta = doc.querySelector('meta[name="viewport"]'), flexMeta = doc.querySelector('meta[name="flexible"]'), dpr = 0, scale = 0, flexible = lib.flexible || (lib.flexible = {}); // 設置了 viewport meta if (vpMeta) { console.warn("將根據已有的meta標籤來設置縮放比例"); var initial = vpMeta.getAttribute("content").match(/initial\-scale=([\d\.]+)/); if (initial) { scale = parseFloat(initial[1]); // 已設置的 initialScale dpr = parseInt(1 / scale); // 設備像素比 devicePixelRatio } } // 設置了 flexible Meta else if (flexMeta) { var flexMetaContent = flexMeta.getAttribute("content"); if (flexMetaContent) { var initial = flexMetaContent.match(/initial\-dpr=([\d\.]+)/), maximum = flexMetaContent.match(/maximum\-dpr=([\d\.]+)/); if (initial) { dpr = parseFloat(initial[1]); scale = parseFloat((1 / dpr).toFixed(2)); } if (maximum) { dpr = parseFloat(maximum[1]); scale = parseFloat((1 / dpr).toFixed(2)); } } } // viewport 或 flexible // meta 均未設置 if (!dpr && !scale) { // QST // 這裏的 第一句有什麼用 ? // 和 Android 有毛關係 ? var u = (win.navigator.appVersion.match(/android/gi), win.navigator.appVersion.match(/iphone/gi)), _dpr = win.devicePixelRatio; // 因此這裏彷佛是將全部 Android 設備都設置爲 1 了 dpr = u ? ( (_dpr >= 3 && (!dpr || dpr >= 3)) ? 3 : (_dpr >= 2 && (!dpr || dpr >= 2)) ? 2 : 1 ) : 1; scale = 1 / dpr; } docElem.setAttribute("data-dpr", dpr); // 插入 viewport meta if (!vpMeta) { vpMeta = doc.createElement("meta"); vpMeta.setAttribute("name", "viewport"); vpMeta.setAttribute("content", "initial-scale=" + scale + ", maximum-scale=" + scale + ", minimum-scale=" + scale + ", user-scalable=no"); if (docElem.firstElementChild) { docElem.firstElementChild.appendChild(vpMeta) } else { var div = doc.createElement("div"); div.appendChild(vpMeta); doc.write(div.innerHTML); } } function setFontSize() { var winWidth = docElem.getBoundingClientRect().width; if (winWidth / dpr > 540) { (winWidth = 540 * dpr); } // 根節點 fontSize 根據寬度決定 var baseSize = winWidth / 10; docElem.style.fontSize = baseSize + "px"; flexible.rem = win.rem = baseSize; } // 調整窗口時重置 win.addEventListener("resize", function() { clearTimeout(timer); timer = setTimeout(setFontSize, 300); }, false); // 這一段是我本身加的 // orientationchange 時也須要重算下吧 win.addEventListener("orientationchange", function() { clearTimeout(timer); timer = setTimeout(setFontSize, 300); }, false); // pageshow // keyword: 倒退 緩存相關 win.addEventListener("pageshow", function(e) { if (e.persisted) { clearTimeout(timer); timer = setTimeout(setFontSize, 300); } }, false); // 設置基準字體 if ("complete" === doc.readyState) { doc.body.style.fontSize = 12 * dpr + "px"; } else { doc.addEventListener("DOMContentLoaded", function() { doc.body.style.fontSize = 12 * dpr + "px"; }, false); } setFontSize(); flexible.dpr = win.dpr = dpr; flexible.refreshRem = setFontSize; flexible.rem2px = function(d) { var c = parseFloat(d) * this.rem; if ("string" == typeof d && d.match(/rem$/)) { c += "px"; } return c; }; flexible.px2rem = function(d) { var c = parseFloat(d) / this.rem; if ("string" == typeof d && d.match(/px$/)) { c += "rem"; } return c; } }(window, window.lib || (window.lib = {}));