关于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文件。

祝学习愉快!

0

0 学习 · 6815 问题

查看课程