html 中rem是什么单位,CSS中的rem单位

搜索热词

px可能是我们在最经常用到的一个css单位，有时也可能会用到em这个单位。

px

px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。(引自CSS2.0手册)

px的长度不是绝对的，我们可以试着设置一个固定的px长度，然后改变分辨率，便可以看出一些差别。当然用户也是可以直接在浏览器里调节字体的大小。

浏览器的默认渲染的文字大小是16px，等于1em，所以未经过调整字体的浏览器都有16px= 1em这个关系存在。

em

em的值并不是固定的，他会继承父元素的字体大小。.Box{font-size:24px;}

span{font-size:1em;}

你好

世界

我们可以在浏览器中看下，发现‘世界’的字体大小是16px，而‘你好’的字体大小则是24px。因此div.class中的后代元素的em则都是相对与24px来计算的。

rem

W3C官网描述是“font size of the root element”，即rem是相对于根元素。(IE9+)

所以我们只要将根元素设置为一个参考值就行了。

所以我们可以采用以下方法，html{

font-size: 62.5%;

/*16 * 0.625 = 10px*/

}

p {

font-size: 1.2rem;

/*10 * 1.2 = 12px*/

}

span {

font-size: 1.4em;

/*10 * 14 = 14px*/

}

这样我们也可以向使用px一样使用rem了，当然rem在移动端的布局是有很大的优势的。

注：chrome下最小字体为12px。

总结

以上是编程之家为你收集整理的CSS中的rem单位全部内容，希望文章能够帮你解决CSS中的rem单位所遇到的程序开发问题。

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。