写一个js配合rem
2021-05-14 01:28
标签：element view get size elm win fir htm body 目前笔者解决移动端的尺寸带来的样式问题，都是通过 写一个js配合rem 标签：element view get size elm win fir htm body 原文地址：https://www.cnblogs.com/blogs-xlf/p/11994418.htmlrem.js
viewport + rem的。viewport 相信大家都用过了，而rem需要用js动态设置html的字体大小。动态设置rem的根字体大小
750,当然也用些用1080的;viewport,比如这样设置：;/**
* design: 是设计稿的宽度，也是页面的最大宽度
* 这里的比例是1:100; 1rem = 100px;
**/
function setRem(design=750){
let styleElm = document.createElement('style');
rem();
document.firstElementChild.appendChild(styleElm);
window.onresize = function(){
rem();
}
function rem(){
let winWidth = document.documentElement.getBoundingClientRect().width;
winWidth = Math.min(winWidth,design);
let fontSize = winWidth / design *100;
document.body.style.fontSize = '16px';
styleElm.innerHTML = 'html {font-size:'+fontSize+'px;}';
}
}