关于rem
来源:2-2 首页-头部样式(1)
soso_crazy
2019-06-04 11:45:59
<script type="text/javascript">
(function () {
var docEl = document.documentElement;
function setRemUnit(){
// 获取到rem的基准值
var rem = docEl.clientWidth / 10;
// 动态设置html根元素的font-size
docEl.style.fontSize = rem + 'px';
}
setRemUnit();
// 窗口大小变化时 触发
window.addEventListener('resize', setRemUnit);
// 窗口出现在当前屏幕时 (有浏览器兼容性)
window.addEventListener('pageshow', function(e){
if (e.persisted) {
setRemUnit();
}
});
})();
</script>
为什么rem的基准值要是html标签的宽度/10,即是浏览器视口宽度/10? 与之前的px2rem插件的37.5有什么关系?
设置html的字体大小不是之前移动端屏幕适配里提及到的 视口宽度/设置的比例ratio 比如视口宽度是750px,设置ratio为18.75。750px/18.75=40px 然后1rem=40px?
涉及到的dpr问题上面的代码如何解决?
1回答
好帮手慕星星
2019-06-04
你好,rem的基准值是自己设置的,不是固定的值,所以设置html字体大小为:docEl.clientWidth / 10或者37.5px或者40px都是可以的。
同学说dpr的意思是想要解决1像素问题吗?这段代码中并没有解决,如果想要解决的话,可以直接引入之前移动端屏幕适配里面封装好的js文件。
祝学习愉快!
相似问题
回答 2
回答 1