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