css长度单位px、em、pt

css长度单位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代码：

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

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

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

HTML代码

<li class= "li-px">我是licss5</li>

<li class="li-pt">我是licss5</li>

<li class="li-em">我是licss5</li>

效果图

三、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作为单位就行了。