如何利用rem在移動端不同設備上讓字體自適應大小
阿新 • • 發佈：2017-12-31
iter war width roi wrap 到手 num params 並且
我們看到的每個屏幕都是由一顆顆我們肉眼難以看到的小顆粒（物理像素）組成的。
2.在css中，可以通過
rem由來：font size of the root element，那麽rem是個單位，單位大小由它第一代老祖宗的font-size的大小決定。現在前端碼農們為了能在各個屏幕上看到一個健康的網頁在默默的犧牲著自己的健康，因為不僅要知道rem是個單位，更重要的是要知道怎麽能在不同分辨率下呈現的頁面都很NB。
事故造成原因：
1.px單位在PC上很流行，在手機屏幕上一看，MLGB的，同樣的12px卻小的跟螞蟻似的。
2.好不容易在iPhone4上調的正常了，換個菊花牌手機，MBD不堪入目了。
3.知道了rem的用法，但是html的font-size到底是多少才合適啊啊啊，媽蛋~。
好了，那麽現在來解決這些問題。
在解決之前，麻煩各位大嬸要了解一些你可能不想了解的東東（警告：不了解這些就不能知道真相喲~）：
1.物理像素(physical pixel)
我們看到的每個屏幕都是由一顆顆我們肉眼難以看到的小顆粒（物理像素）組成的。
2.邏輯像素
是計算機坐標系統中的一個點，這個點代表一個可以由程序使用的虛擬像素(比如說CSS像素)。
3.設備的像素比(device pixel ratio)簡稱DPR
它的數值體現了物理像素和邏輯像素之間的關系，用公式可以計算出該設備的DPR的大小：
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)。
本人也在網上看了不少動態設置rem的文章，下面把幾個常用的列舉出來：一，用媒體查詢來設置html的font-size：
@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;}
}
二、利用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 = {}));
忘了說了，手機淘寶很多頁面用的就是這種方法來適配終端的。
然後留個demo，可以看一下手機淘寶用上面方法怎麽實現的（用手機掃下面的二維碼吧）：
或點擊去查看
結束語：
其實想要適配好不同終端並不難，一定要理解好什麽是物理像素、什麽是邏輯像素、什麽是DPR，並且弄清楚他們之間的關系，我們這些搞前端的，不就是在與像素打交道嗎？
如何利用rem在移動端不同設備上讓字體自適應大小