预读 rem
rem作为一个单位是受 html 标签的 font-size 变化而变化的
<html style="font-size:24px;">
<body>
<div style="font-size:.5rem;"></div>
</body>
</html>
因上可得：通过控制 html 的 font-size 来达到一个简单的自适应
实现自适应
在 html 中添加
<meta name="viewport" content="width=device-width, initial-scale=1" />
这条代码的作用为控制显示宽度
网页宽度默认等于屏幕宽度（width=device-width）
原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。
然后添加一个 **script** 标签，或新建且引入 写入以下代码
(function (){
function setPixelRatio (){ // 作用：当某个标签没有使用rem作为单位，那么不进行自适应
document.body ? document.body.style.fontSize = 12 * window.devicePixelRatio + 'px' : document.addEventListener('DOMContentLoaded',setPixelRatio) //DOMContentLoaded事件，在HTML文档加载和解析完成之后触发，不会等待stylesheets, images, and subframes加载结束。
} //设置设备像素比
setPixelRatio() // 可注释
function setFontSize() { //动态设置html的font-size
document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px'
}
setFontSize()
window.addEventListener("resize",setFontSize) //当页面宽度发生变化时触发
window.addEventListener("pageshow",function (e){e.persisted && setFontSize()}) //页面前进或后退都重新设置像素比
}())
至此通过动态修改 html 的 font-size 实现了一个简单的自适应
setFontSize 函数将页面宽度取 十分之一 作为 html 的 font-size 的大小
原因是需要配合一个 vscode插件 便于开发和设计图便于计算
如设计图宽度为 375px，那么 px2rem-plus 栏值应为 375 / 10
在开发时即可快速运算出对应的rem大小
1140
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
