em是相对于其父元素来设置字体大小的进行任何的元素设置都有可能需要知道他父元素的大小，在我们多次使用时，就会带来错误风险。而rem是相对于根元素<html>，这就意味着，我们只需要在根元素确定一个参考值，在根元素中设置多大的字体，这完全可以根据自己的需要
image.png
rem是相对于根元素html计算的。如果html设置了font-size的值那么1rem等于font-size的值。如果没有设置咋默认1rem = 16px
下面代码根据设备宽度定义根元素html的值，代码如下 （iphone6下 375/7.5=50 那么1rem=50px,其他尺寸的同理）
window.onload = function(){
document.documentElement.style.fontSize = document.documentElement.clientWidth/7.5 + 'px';
window.addEventListener("resize",function(){
document.documentElement.style.fontSize = document.documentElement.clientWidth/7.5 + 'px';
})
}
Paste_Image.png
用于移动端直接1rem = 50px不用除以2
好文参考
http://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html
网友评论