rem

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

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 了解真實的『REM』手機屏幕適配rem 作為一個低調的長度單位,由于手機端網頁的興起,在屏幕適配中得到重用。 使用...
    張憲宇閱讀 2,279評論 0 5
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,796評論 1 92
  • 作者:HelKyle鏈接:http://www.w3cplus.com/css/when-to-use-em-vs...
    紅葉丶秋鳴閱讀 3,290評論 0 3
  • 網頁字體排版的最佳實踐之一就是使用相對單位,如rem和em. 問題是,你應該使用哪一個呢?一直以來,rem支持者和...
    mhy_web閱讀 641評論 0 0
  • 什么是Rem rem和em很容易混淆,其實兩個都是css的單位,并且也都是相對單位,現有的em,css3才引入的r...
    tobAlier閱讀 27,949評論 2 38