在head标签中加入的js原生代码
<script>
(function(doc,win){
let docEl = doc.documentElement;
let resizeEvt = 'orientationchange' in window ? 'orientationchange':'resize';
let recale = function(){
let clientWidth = docEl.clientWidth;
if(!climent) return;
docEl.style.fontSize = 100*(clientWidth/750)+'px';
}
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
</script>
使用:如果你的设计稿是750宽,那就依旧是上面的750,这代表是每100px = 1rem;这样在css样式的时候就写对应的rem值就好,当然,如果你的分辨率不是750相信你也学会了怎么使用
原理:rem也是一个单位,相应的单位还有px,vh,em,rem相对特殊,布局的时候会进行计算,每次先动态的算好当前的页面的1rem相当于多少px来进行渲染