您的位置:首页 > Web前端 > css

css长度单位px、em、pt

更多 2014/4/20 来源:css学习浏览量:1769
学习标签: css长度单位 font-size
本文导读:翻看别人网页时,会发现他们对于字体的定义方式都有所不同,有些人使用px(如font-size:12px),有些人则使用em(如font-size:1.2em),更有人使用pt。那么这个px、em、pt到底有什么区别呢?或者更关心的问题是我们在编写代码的时候到底应该如何选择呢?

一、长度单位px、em、pt的介绍

 

px    像素(Pixel)是相对长度单位,像素px是相对于显示器屏幕分辨率而言的

em     是相对长度单位,相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。

pt     单位名称为点(Point),绝对长度单位一般老版本的table使用长度大小单位但是现在基本上没有使用。

 

二、长度单位实例

 

1、定义宽度:


Width:300px 宽度为300像素
Width:300pt 宽度为300点
Width:300em 宽度为300相对长度

 

2、对文字设置不同长度em px pt单位:

 

CSS代码:

.div-px{ font-size:12px}

.div-pt{ font-size:12pt}

.div-em{ font-size:2em}

 

HTML代码

<div class= "div-px">我是divcss5</div>

<div class="div-pt">我是divcss5</div>

<div class="div-em">我是divcss5</div>

 

效果图

 

 

三、em与px换算

 

任意浏览器的默认字体高度16px(16像素)。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算,需要在css中的body选择器中声明font-size=62.5%,这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了。

 

12px相当于9pt长度
12px相当于0.75em长度
9pt相当于0.75em长度

 

高级em与px换算:


任意浏览器的默认字体高度16px(16像素)。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算,需要在css中的body选择器中声明font-size=62.5%,这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了。

 

收藏
339
很赞
408
您可能感兴趣