rem实现移动端适配
rem单位是html的字体大小单位默认为16px,但是用16px来计算,我们并不是很好计算,所以会先吧html的fontSize设置为10px
实现原理
根据视口宽度来调整html的fontSize属性
代码如下
;(function setRem(){
document.documentElement.style.fontSize = document.documentElement.offsetWidth/375*10 + 'px'
window.onresize = setRem
})()
当我们视口宽度为375px的时候那么html的fontSize就是10px
当我们视口宽度为750px的时候那么html的fontSize就是20px
将html的fontSize和页面宽度设置为一定的比例,当视口宽度发生变化时,更新
html的fontSize,这样就实现了rem的自适应
注意
要再给body把字体大小设置为默认值,这样才不会影响页面文本的字体大小