https://www.jianshu.com/p/4abf192b175f
keywords
响应式 rem 布局
flexible amfe/lib-flexible
https://github.com/amfe/lib-flexible/blob/2.0/index.js 代码来源:all-project\H5\remote\CRMEB-H5\src\assets\js\media_750.js
javascript
(function flexible(window, document) {
var docEl = document.documentElement || document.body;
var dpr = window.devicePixelRatio || 1;
// adjust body font size
function setBodyFontSize() {
if (document.body) {
} else {
document.addEventListener("DOMContentLoaded", setBodyFontSize);
}
}
setBodyFontSize();
// set 1rem = viewWidth / 10
function setRemUnit() {
var rem = docEl.clientWidth / 7.5;
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);
}
// WeixinJSBridge 后加的,非amfe/lib-flexible中的代码
if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
handleFontSize();
} else {
if (document.addEventListener) {
document.addEventListener("WeixinJSBridgeReady", handleFontSize, false);
} else if (document.attachEvent) {
document.attachEvent("WeixinJSBridgeReady", handleFontSize);
document.attachEvent("onWeixinJSBridgeReady", handleFontSize);
}
}
function handleFontSize() {
// 设置网页字体为默认大小
WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize' : 0 });
// 重写设置网页字体大小的事件
WeixinJSBridge.on('menu:setfont', function() {
WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize' : 0 });
});
}
})(window, document);taro h5模板里的方案
javascript
!(function (n) {
function e() {
var e = n.document.documentElement,
t = e.getBoundingClientRect().width;
e.style.fontSize =
t >= 640 ? "40px" : t <= 320 ? "20px" : (t / 320) * 20 + "px";
}
n.addEventListener("resize", function () {
e();
}),
e();
})(window);vw
typescript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"
/>
<title>rem-vw</title>
<style>
html {
/* 6.4rem是100%宽 */
font-size: 15.625vw;
}
</style>
</head>
<body></body>
</html>postcss-px-to-viewport
postcss-pxtorem
typescript
css: {
loaderOptions: {
postcss: {
plugins: [
autoprefixer(),// 前缀插件
pxtorem({
rootValue: 37.5,
propList: ["*", "!border*"],
}),
],
},
},
},
xxxsjan Docs