新网站马上就要上线了,最近一直忙于前后台的页面,博客这边也没有管,加上最近要找暑期实习,今天早上参加完笔试,下午偷闲,写下这篇文章。

在 CSS 中,px 是像素值,就是显示器上面一个点的大小,而 em 是一个相对的大小,指一种特殊字体的大写字母 M 的高度,国外的很多网站在字体设置上面使用的是 em 而不是 px,是因为 em 在 IE 下面具有可调控性,支持鼠标缩放,这就为弱视的人提供方便,一般浏览器中没有经过重定义的 1em = 16px,并且 em 的字体大小具有继承特性,例如 div 标签的嵌套,设置字体大小为 1.2em,则从外层到内层的字体是逐渐变大的,也就是内层字体大小是外层字体的 1.2 倍,

em 字体大小和 px 的转换有些麻烦,所以我的解决方案就是设置 body 的 font-size 大小为 63% 或者 62.5%,这样 1em 字体的大小就被固定为 10px,然后使用 em 代替字体的属性,12px = 1.2em,以此类推。用 em 来表示长度就是基于字体大小的设计,通过改变字体默认大小来改变网页大小。

px 宽度常用在图片宽度的定义等绝对定义的场合,使用 px 设计的网页不会因为父元素的大小而改变,这样可以保证设计的精确度。但是在 IE 浏览器上面缩放就不能自如了。

现在 chrome,firefox 等主流浏览器都支持全文缩放了,IE 中的 IE8 以上版本也都支持,所以基于字体的设计也就失去了意义,使用 px 更直观的表示宽度,字体大小,这样说,绝大部分都不需要 em 单位了,但是 em 还是有使用的地方的,中文文章的段落首行缩进两个字符使用 em 就很好,直接使用 p {text-indent: 2em} 就行了,另外在其他需要依字体大小来设置宽高度,大小的使用 em 也是比较方便的。