em、pt、px和百分比

浏览器默认的字体大小为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>

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; }

巴特西

em、pt、px和百分比

最新文章

热门文章