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中文網其它相關文章！
推薦閱讀：
以上是REM相對單位使用案例分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！
