flexible.js 默认把页面分成10等份。
假设：设计图是750px的规格大小 那么1rem=75px(750/10)。
如果、恰巧、刚好，有人在pc打开怎么办，好家伙那字体大的还不得起飞。所有我们加个判断，过于大时让它两边留白：
var clientWidth = docEl.clientWidth
if (clientWidth > 1200) {
clientWidth = 1200;
}
flexible.js代码(将代码复制到js文件引用到界面，按照自己想要的大小修改就可以)：
(function flexible(window, document) {
var docEl = document.documentElement;
var dpr = window.devicePixelRatio || 1;
// adjust body font size
function setBodyFontSize() {
if (document.body) {
document.body.style.fontSize = 12 * dpr + "px";
} else {
document.addEventListener("DOMContentLoaded", setBodyFontSize);
}
}
setBodyFontSize();
// set 1rem = viewWidth / 10
function setRemUnit() {
//当屏幕大于1200时，设置为1200,也就时最大不能超过1200，根据需求自己设定大小
var clientWidth = docEl.clientWidth
if (clientWidth > 1200) {
clientWidth = 1200;
}
//将屏幕分成10等份 750px的界面1rem=75px
var rem = clientWidth / 10;
docEl.style.fontSize = rem + "px";
}
setRemUnit();
// reset rem unit on page resize
window.addEventListener("resize", setRemUnit);
window.addEventListener("pageshow", function(e) {
if (e.persisted) {
setRemUnit();
}
});
// detect 0.5px supports
if (dpr >= 2) {
var fakeBody = document.createElement("body");
var testElement = document.createElement("div");
testElement.style.border = ".5px solid transparent";
fakeBody.appendChild(testElement);
docEl.appendChild(fakeBody);
if (testElement.offsetHeight === 1) {
docEl.classList.add("hairlines");
}
docEl.removeChild(fakeBody);
}
})(window, document);
通过计算来定义页面元素rem的大小，VSCode可以下载cssrem插件自动帮你计算。需要点击Extension Settings 设置 Cssrem:Root Font Size 参数将其设置为算好的75px，cssrem.fixedDigits px转rem小数点最大长度，默认：6。
image
image
