em、pt、px和百分比

时间:2022-11-01 04:37:22

浏览器默认的字体大小为100%=16px=12pt=1em

px像素(Pixel):是固定大小的单元。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。一个像素等于电脑屏幕上的一个点(是你屏幕分辨率的最小分割)。像素单元的一个问题是,它没有为视障读者的扩展,以适应移动设备。

点(pt):通常用于印刷媒体(任何打印在纸上的媒体,等等)。一个点等于一英寸的1/72。点跟像素,他们是固定大小的单位,不能伸缩。

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

百分比(%):百分比单位更像“em”单位,除了一些根本性的差异。首先,当前的字体大小等于100%(比如12 pt = 100%)。当使用百分比单位,你的文字在移动设备上仍然保持完全的可伸缩性和可访问性。

em跟%的区别:
当用户设置网页字体“Smallest”或者“Largest”的时候,em比%显示地更大。即当真正去扩展时,在实际应用程序中,em文本尺寸变化太大,在一些客户端机器上最小的文本变得不是很清晰。
 
使用px的弊端:
ie浏览器“查看→文字大小”时设置不起作用,影响用户体验。即IE无法调整那些使用px作单位的字体大小。
firefox可以调整px和em?表示怀疑 经测试也不支持px。在“工具→选项”里面调整字体大小
chorome经测试也不支持px。在“设置→显示高级设置”里面设置字体大小
 
浏览器字体重置:
因为浏览器默认字体大小100%是16px=1em。所以要设置10px=1em的时候只要重置字体百分比为10/16=62.5%。这样,10px=1em; 12px只要写成1.2em即可
但IE浏览器在处理汉字时,对于浮点的取值精确度有限,在body下62.5%比直接定义的字体要大一点点,因此ie中 *font-size:63%即可。
注意:em和%会继承父级元素的字体的大小。
所以若最外层div为
/*font-size*/
.fz { font-size: 1.2em; }

本应该,14px=1.4em,但因为浏览器字体的继承性

<div class="fz">
字体大小12px
<div style="font-size: 1.4em">
字体大小font-size: 1.4em
</div>
</div>
<div style="font-size: 1.4em">
字体大小font-size: 1.4em
</div>

em、pt、px和百分比

so,

/*font-size*/
.fz { font-size: 1.2em; } .fz button, .fz input, .fz select, .fz textarea, .fz option { font-size: 1em; } .fz14, input.fz14 { font-size: 1.17em; } .fz16 { font-size: 1.33em; } .fz18 { font-size: 1.5em; } .fz20 { font-size: 1.67em; } .fz24 { font-size: 2em; }