pt，px，rem和em之間區(qū)別總結(jié)

raledong 發(fā)布于2019-08-01 15:08 / 1905人閱讀

摘要：與在設(shè)計(jì)字體的樣式中，有些字體設(shè)置成，而不是，那是什么，和又有什么關(guān)系呢是印刷行業(yè)常用的單位，等于英寸，表示絕對(duì)長(zhǎng)度。指的是像素，是屏幕上顯示數(shù)據(jù)的最基本的點(diǎn)，表示相對(duì)大小。

pt與px

在html設(shè)計(jì)字體的css樣式中，有些字體設(shè)置成14pt，而不是14px，那pt是什么，和px又有什么關(guān)系呢？

pt(point)是印刷行業(yè)常用的單位，等于1/72英寸，表示絕對(duì)長(zhǎng)度。px(pixel)指的是像素，是屏幕上顯示數(shù)據(jù)的最基本的點(diǎn)，表示相對(duì)大小。不同分辨率下相同長(zhǎng)度的px元素顯示會(huì)不一樣，比如同樣是14px大小的字，在1366*768顯示屏下會(huì)顯示的小，在1024*768尺寸的顯示器下會(huì)相對(duì)大點(diǎn)。

px和pt轉(zhuǎn)換規(guī)則很簡(jiǎn)單，默認(rèn)的顯示設(shè)置中把文字定義為96DPI，由公式px=pt*DPI/72，可得pt=px*3/4。

em和rem

em是相對(duì)長(zhǎng)度單位，相對(duì)于當(dāng)前對(duì)象內(nèi)文本的字體尺寸，即em的計(jì)算是基于父級(jí)元素font-size的。比如：


    我這里的字體顯示大小是28px(14px*2)  
    
        我這里顯示字體大小是36px(18px*2),而不是上面計(jì)算的28px

rem是css3新增的一個(gè)相對(duì)單位，與em的區(qū)別在于，它是相對(duì)于html根元素的(在body標(biāo)簽里面設(shè)置字體大小不起作用)。還是上面那個(gè)例子，如果換做rem，結(jié)果如下：

 
     我這里的字體顯示大小是32px(16px*2),因?yàn)槲沂歉鶕?jù)html根元素的font-size大小進(jìn)行計(jì)算的  
     
         我這里顯示字體大小是32px(16px*2),因?yàn)槲沂歉鶕?jù)html根元素的font-size大小進(jìn)行計(jì)算的

*補(bǔ)充默認(rèn)font-size大小是16px(如果html中沒有設(shè)置的話)。