什麼是px,em,rem

px

1px表示螢幕上的像素高

em 指一個大寫字母M所佔的寬度

  • 用em作字級單位時，會先宣告body字級大小

    如：慣用12px為基本單位

  body {
    font-size: 75%;  /*此時,body字級=12px*/
  }
  /* 因預設body字級16px,所以12/16=75% */

此時body字級為12px

所以2em=24px

rem 指root em

  • 是CSS3 新增的一個相對單位，相對於根源素html

    如慣用12px為基本單位
  html {
    font-size: 75%;       /*此時html字級為12px */
  }
  /* 因12/16=75% */

  body {
    font-size: 1rem;      /*此時body字級為12px */
  }
  h1 {
    font-size: 2rem;      /*此時h1字級為24px */
  }
  p {
    font-size: 1.25rem;  /*此時p字級為15px */
  }

對於不支援rem的瀏覽器,加寫px

如

p {
  font-size: 14px; 
  font-size: .875rem;
}



以上參考資料






results matching ""

    No results matching ""