REM相對單位使用案例分享

這次帶給大家REM相對單位使用案例分享，REM相對單位使用的注意事項有哪些，以下就是實戰案例，一起來看一下。

    rem（font size of the root element）指相對於根元素的字體大小的單位。簡單的說它就是一個相對單位。看到rem大家一定會想起em單位，em（font size of the element）是指相對於父元素的字體大小的單位。它們之間其實很相似，只不過一個計算的規則是依賴根元素一個是依賴父元素計算。

上面說過rem是透過根元素進行適應的，網頁中的根元素指的是html我們透過設定html的字體大小就可以控制rem的大小，舉例。

<span style="font-size: 14px;">html{<br>    font-size:20px;<br>}<br>.btn {<br>    width: 6rem;<br>    height: 3rem;<br>    line-height: 3rem;<br>    font-size: 1.2rem;<br>    display: inline-block;<br>    background: #06c;<br>    color: #fff;<br>    border-radius: .5rem;<br>    text-decoration: none;<br>    text-align: center;    <br>}</span>

我們透過改變html中的font-size的大小來控制我們的dom元素的字體大小。

為了適合不同解析度的相容，可以透過js來動態產生html裡的font-size的大小，我們也可以針對主流機型透過media query來設定。例如下面這邊程式碼，不太了解media query可以學習下http://www.w3cplus.com/content/css3-media-queries

<span style="font-size: 14px;">html{font-size: 20px;}<br>@media only screen and (min-width: 320px){<br>    html{font-size: 20px !important;}<br>}<br>@media only screen and (min-width: 350px){<br>    html{font-size: 22.5px !important;}<br>}<br>@media only screen and (min-width: 365px){<br>    html{font-size: 23px !important;}<br>}<br>@media only screen and (min-width: 375px){<br>    html{font-size: 23.5px !important;}<br>}<br>@media only screen and (min-width: 390px){<br>    html{font-size: 24.5px !important;}<br>}<br>@media only screen and (min-width: 400px){<br>    html{font-size: 25px !important;}<br>}<br>@media only screen and (min-width: 428px){<br>    html{font-size: 26.8px !important;}<br>}<br>@media only screen and (min-width: 432px){<br>    html{font-size: 27.4px !important;}<br>}<br>@media only screen and (min-width: 481px){<br>    html{font-size: 30px !important;}<br>}<br>@media only screen and (min-width: 569px){<br>    html{font-size: 35px !important;}<br>}<br>@media only screen and (min-width: 641px){<br>    html{font-size: 40px !important;}<br>}</span>

當然在設定html中的font-size的時候，我們可能還會看到這樣的寫法，html {  font-size: 62.5% }。 這主要是為了方便em與px互相轉換，em的初始值為1em=16px，顯然這樣的話，如1.2em則=19.2px，可是我們在設定的時候很少看見19.2px這樣表示的大小，也就是用px表示大小時數值是不帶小數位的。當設定了body{font-size: 62.5%;}時，1em則=16px*62.5%=10px,1.2em則=12px，這是不是就簡單多了，準確多了呢~~。  

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

常用的程式碼整理總結

##H5 Canvas使用案例詳解
#

以上是REM相對單位使用案例分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！