首頁 >web前端 >H5教程 >REM相對單位使用案例分享

REM相對單位使用案例分享

php中世界最好的语言
php中世界最好的语言原創
2018-06-04 11:52:282673瀏覽

這次帶給大家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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn