頁面適配之pt、px、em、rem的用法

時間 2020-01-01

標籤頁面適配 rem 用法欄目 CSS 简体版

原文原文鏈接

咱們在開發頁面時，會遇到pt、px、em、rem這四種單位。下面介紹一下這四個單位。html

1.pt，英文爲points，絕對長度單位，意爲磅。設計軟件zeplin所用的單位就是pt。如今不多使用這個單位了。瀏覽器

2.px，英文爲pixel，相對長度單位，意爲像素。是相對於屏幕分辨率的單位，國內主流單位。字體

3.em，相對長度單位，相對於當前對象內文本的字體尺寸，即em的計算是基於父級元素font-size的。好比：spa

<body style="font-size:14px">
    <p style="font-size:2em">我這裏的字體顯示大小是28px(14px*2)</p>  
    <div style="font-size:18px">
        <p style="font-size:2em">我這裏顯示字體大小是36px(18px*2),而不是上面計算的28px</p>
    </div>
</body>

這個單位國外用的比較多。設計

4.rem，即root em,是CSS3新出的單位，用於移動端的適配。code

這個單位與em有什麼區別呢？
區別在於使用rem爲元素設定字體大小時，仍然是相對大小，但相對的只是HTML根元素。htm

這個單位可謂集相對大小和絕對大小的優勢於一身，經過它既能夠作到只修改根元素就成比例地調整全部字體大小，又能夠避免字體大小逐層複合的連鎖反應。對象

目前，除了IE8及更早版本外，全部瀏覽器均已支持rem。對於不支持它的瀏覽器，應對方法也很簡單，就是多寫一個絕對單位（如pt）的聲明。這些瀏覽器會忽略用rem設定的字體大小。blog

使用方法：開發

html{
    font-size:16px;
}

 <body style="font-size:14px">
     <p style="font-size:2rem">我這裏的字體顯示大小是32px(16px*2),由於我是根據html根元素的font-size大小進行計算的</p>  
     <div style="font-size:18px">
         <p style="font-size:2rem">我這裏顯示字體大小是32px(16px*2),由於我是根據html根元素的font-size大小進行計算的</p>
     </div>
 </body>

瀏覽器默認的字體大小就是16px，因此html的font-size不寫也能夠。

這是px在線轉rem的地址。

rem配合媒體查詢可兼容移動端的不一樣設備。如：

@media only screen and (min-width: 320px){
  html {
    font-size: 62.5% !important;
  }
}
@media only screen and (min-width: 640px){
  html {
    font-size: 125% !important;
  }
}
@media only screen and (min-width: 750px){
  html {
    font-size: 150% !important;
  }
}
@media only screen and (min-width: 1242px){
  html {
    font-size: 187.5% !important;
  }
}