乐趣区

pxemrem区别

一直对 px、em、rem 这几个单位的区别不是很清晰,今天查阅了一些资料,整理了一下自己的理解。

1.62.5% 是什么?

相信写过响应式的小伙伴都知道下面的代码:

html {font-size: 62.5%!important;}

这里为什么是 62.5%?
因为任意浏览器的默认字体高都是 16px。
而 1em=16px。那么 12px=0.75em,10px=0.625em
但是这样非常不好计算。比如 14px=?em。反正我是不能心算出来。
为了简便计算,把字体设置成 62.5%。
这就使 em 值变为 16px*62.5%=10px, 这样 12px=1.2em, 10px=1em, 也就是说只需要将你的原来的 px 数值除以 10,然后换上 em 作为单位就行了。所以 14px=1.4em; 这样就简单多了。

2.px,em,rem 区别

px

- 相对于屏幕,像素点。

em

- 当前对象内文本的字体尺寸。注意:它 继承父元素的字体。
举例:父元素和子元素都是 14px 的字体,正确代码如下:

.parent{font-size:1.4em;}  .parent .son{font-size:1em;// 错误写法:font-size:1.4em; 要是这样写,实际字体大小会是 1.4*1.4em},显然,这并不是我们想要的。

rem:

css3 新增的。它和 em 的区别就是 不会 继承父元素的字体。

兼容性

如果需要兼容浏览器也很简单,只需要把 px 和 rem 都设置上就可以了。

p {font-size:14px; font-size:1.4rem;}
退出移动版