前言
手机端页面动态设置根元素,适配不同屏幕大小。
开始
<script>
//rem为html的字体大小 通过改变html的字体大小达到适配的效果
remChange();
//监听屏幕改变resize事件 触发remChange方法
window.addEventListener("resize", remChange)
function remChange() {
const html = document.querySelector("html");
const width = html.getBoundingClientRect().width; //拿到适配器的宽度值
//若屏幕宽为375px则1rem = 100px 若不是则按比例增大或减小
html.style.fontSize = width / 7.5 + 'px';
}
</script>
根据ui设计师给的在ip6下的图,各种尺寸只需除以10,就可以正常进行适配。