国内的设计师大都喜欢用 px, 而国外的网站大都喜欢用 em 和 rem, 那么三者有什么区别, 又各自有什么优劣呢?
px: 像素 (Pixel) 相对长度单位像素 px 是相对于显示器屏幕分辨率而言的(引自 CSS2.0 手册)
px 特点:
IE 无法调整那些使用 px 作为单位的字体大小;
国外的大部分网站能够调整的原因在于其使用了 em 或 rem 作为字体单位;
Firefox 能够调整 px 和 em,rem, 但是 96% 以上的中国网民使用 IE 浏览器(或内核)
em : 是相对长度单位相对于当前对象内文本的字体尺寸如当前对行内文本的字体尺寸未被人为设置, 则相对于浏览器的默认字体尺寸(引自 CSS2.0 手册)
em 特点:
em 的值并不是固定的;
em 会继承父级元素的字体大小
任意浏览器的默认字体高都是 16px 所有未经调整的浏览器都符合: 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 作为单位就行了
所以我们在写 CSS 的时候, 需要注意两点:
body 选择器中声明 Font-size=62.5%;
将你的原来的 px 数值除以 10, 然后换上 em 作为单位;
重新计算那些被放大的字体的 em 数值避免字体大小的重复声明
rem : 是 CSS3 新增的一个相对单位(root em, 根 em), 这个单位引起了广泛关注
这个单位与 em 有什么区别呢?
区别在于使用 rem 为元素设定字体大小时, 仍然是相对大小, 但相对的只是 html 根元素这个单位可谓集相对大小和绝对大小的优点于一身, 通过它既可以做到只修改根元素就成比例地调整所有字体大小, 又可以避免字体大小逐层复合的连锁反应目前, 除了 IE8 及更早版本外, 所有浏览器均已支持 rem 对于不支持它的浏览器, 应对方法也很简单, 就是多写一个绝对单位的声明这些浏览器会忽略用 rem 设定的字体大小
pt: 印刷业上常使用的单位, 磅的意思, 一般用于页面打印排版
转载: css 中单位 pxptem 和 rem 的区别
来源: http://www.qdfuns.com/article/15723/ff8d6756295f75abee595726c2b7ba96.html