REM布局理解以及解決方案

REM布局理解以及解決方案

  1. REM的理解

REM是一個相對長度單位,它是基于html根元素的fontSize來動態計算的,默認情況下html根元素的fontSize16px ,也就是說:1rem=16px

如果設置html元素的fontSize:32px,那么對應的1rem=32px。此時,html根元素的fontSize是寫死的,此時rem的值也是固定的,不管在什么設備下1rem=32px

<style>
    div{
      font-size: 1rem;
    }
 </style>
.....
<div>文字</div>
Untitled.png
<style>
    html{
      font-size: 32px;
    }
    div{
      font-size: 1rem;
    }
 </style>
<div>文字</div>
Untitled 1.png
  1. 基于對上面REM的理解,那么要如何通過REM實現響應式布局呢?(REM布局原理)

答案是必須讓REM變成一個相對動態的單位,在不同設備下REM的值是不一樣的。既然REM的大小是基于html根元素的fontSize來決定的,就可以讓html根元素的fontSize來根據設備的尺寸變化動態變化,從而達到REM動態計算的效果。

  1. 那么如何動態設置htmlfontSize的大小呢?(REM布局實現方案)

    使用VW單位設置htmlfontSize

    VW是一個視口單位,任何設備屏幕寬度都可用100vw表示,即把設備屏幕切割成100份,每一份就是1vw,那么針對不同尺寸的設備,1vw表示的單位值也就不一樣。用vw來設置htmlfontSize就可以實現動態變化了。

    那么htmlfontSize設置多少vw合適呢?

    iPhone6設備為例,iPhone6的設備寬度是375px,即在iPhone6設備上100vw=375px,通過比例關系100vw:375px = x:100px 可以得出100px=26.66667vw,那么這個26.66667vw就是要設置給htmlfontSize值了。

    這時候可能就有人會有疑問,為什么要用100px來化簡出26.66667vwhtmlfontSize值?

    這是因為設置100px是為了在使用的時候更加方便快捷的進行pxrem的數值轉換。設置htmlfontSize26.66667vw后,1rem=26.66667vw=100px,如果設計稿對應的元素是16px,根據比例化簡:1rem:100px = xrem:16px,可以得出:x=0.16,即16px=0.16rem,這樣就可以很快捷的進行pxrem的轉化,所以這里用100px作為化簡值,不一定是必須的,你可以用10px或者其他,化簡到對應的vm值,方便計算即可。

    此時,html根元素的fontSize值為26.66667vw就是一個可以動態變化的值,不同尺寸屏幕下對應的值也就不同,rem對應的值也就會不同。

    <style>
        html{ font-size: 26.66667vw;}
        div{ font-size: 1rem;}
     </style>
    ...
    <div>文字</div>
    
    Untitled 2.png

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

推薦閱讀更多精彩內容