摘要:
下文讲述常见的长度单位”px em pt”功能说明,如下所示:
px、pt、em单位简介说明
px:像素,相对长度单位,像素(px)是相对于显示器屏幕分辨率而言的国内推荐;
em:单位名称为相对font-size的长度单位。相对于当前对象内文本的字体尺寸,国外使用比较多
pt:点
例:
1、 :
Width:80px 宽度是80像素
Width:80pt 宽度是80点
Width:80em 宽度是80相对长度
例:
使用px pt em设置浏览效果
.maomao-px{ font-size:16px}
.maomao-pt{ font-size:16pt}
.maomao-em{ font-size:1em}
pt_px_em举例说明
从以上运行效果上,我们可以看出px pt em之间的对比。
px 同em之间换算
浏览器默认字体高度为16px,
所以默认浏览器的字体高度为1em
那么我们可以得出
12px =0.75em;
10px =0.625em;
注意事项:
我们经常看见css样式中设置
*{font-size=62.5%}
其实这个设置的意思为:font-size的长度为浏览器默认高度的百分之62.5%及16px*62.5% =10px;
由于改变了font-size的默认高度,那么1em= 62.5%*16px =10px;
如果我们在后续的文本中定义font-size为12px,则应该使用font-size:1.2em (1.2em = 12px/10px);
em单位的相关说明
em值是一个相对值,是相对font-size为一个单位的值
em值可随着font-size中的初始值进行变化
如果css中需使用em作为单位,我们首注意以下两点:
1.声明font-size长度,例:font-size=62.5%;
2.如果font-size设置为62.5%后,将px转换为em时,先除以10,然后再将后面的单位修改为em