css裡px、em、rem的區別和應用

來源:互聯網
上載者:User

第一:px,em,rem的區別在哪。

Px是一個絕對字型大小
em則是基於基數(比如:1.5em)來計算出來的相對字型大小。這個基數是需要乘以當前對象從其父級遺傳字型大小。
rem是基於根節點(比如html)的字型大小進行計算的。

先說em 如果你的預設父級容器字型為16px ,那麼2em=2*16px

<div class="parent" style="font-size: 16px">    <p style="font-size: 2em">我是em測試</p></div>

rem預設字型大小是依據你網站當前訪問時所使用的瀏覽器或者其他裝置來決定的,特別適合響應設計,受到了移動設計的追捧

<!DOCTYPE html><html style="font-size: 14px"><head lang="en">    <meta charset="UTF-8">    <title></title></head><body><div class="parent" style="font-size: 16px">    <p style="font-size: 2em">我是em測試</p>    <p style="font-size: 2rem">我是rem測試</p></div></body></html>

在網上看到
為了更方便的進行計算轉換,你可以把預設字型大小設定成62.5%或者是10px方便了計算
大多數瀏覽器(不包括ie8以下)都支援rem單位的字型大小
如果想支援可以,如下:

html { font-size: 62.5%; }p { font-size: 15px; font-size: 1.5rem; } 
相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.