pt，px，rem和em之間區別總結

時間 2020-01-06

標籤 rem 之間區別總結欄目 CSS 简体版

原文原文鏈接

pt與px

在html設計字體的css樣式中，有些字體設置成14pt，而不是14px，那pt是什麼，和px又有什麼關係呢？css

pt(point)是印刷行業經常使用的單位，等於1/72英寸，表示絕對長度。px(pixel)指的是像素，是屏幕上顯示數據的最基本的點，表示相對大小。不一樣分辨率下相同長度的px元素顯示會不同，好比一樣是14px大小的字，在1366*768顯示屏下會顯示的小，在1024*768尺寸的顯示器下會相對大點。html

px和pt轉換規則很簡單，默認的顯示設置中把文字定義爲96DPI，由公式px=pt*DPI/72，可得pt=px*3/4。css3

em和rem

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

<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>

rem是css3新增的一個相對單位，與em的區別在於，它是相對於html根元素的(在body標籤裏面設置字體大小不起做用)。仍是上面那個例子，若是換作rem，結果以下：設計

<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>

*補充默認font-size大小是16px(若是html中沒有設置的話)。code

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。