css中px,em和rem的区别
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css中px,em和rem的区别相关的知识,希望对你有一定的参考价值。
css中px,em和rem的区别
今天,突然间发现一个特别有意思的问题,就是无意间看到一个网站中的em并不是16px,下面展开了对于px和em以及rem的探究。
首先,px是绝对长度单位,是相对于显示器屏幕分辨率而言的,而em、rem是相对长度单位,相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。在国内,大部分网站是无法调整的,他们大部分是用的px做单位,国外的网站大多用em或rem作为单位字体,他们的网站的字体就容易调控。
然后针对单独的px、em、rem我们说说他们的不同特点:
px特点:px是典型的度量单位,值是固定的
em特点:em的值并不是固定的; em会继承父级元素的字体大小。
rem特点:rem是CSS3新增的一个相对单位(root em,根em),这个单位引起了广泛关注。这个单位与em有什么区别呢?区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是html根元素。这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。目前,除了IE8及更早版本外,所有浏览器均已支持rem。对于不支持它的浏览器,应对方法也很简单,就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。
那么问题来了,它们之间如何转化呢?下面是几种常见的转化方式:
PX to EM
Example: 12px / 16px = .75em
PX to %
Example: 12px / 16px * 100 = 75%
PX to PT
Example: 16px * (72pt / 96px) = 12pt
EM to PX
Example: .75em * 16px = 12px
EM to %
Example: .75em * 100 = 75%
所以我们在写CSS的时候,需要注意:
1. body选择器中声明Font-size=62.5%;
2. 将你的原来的px数值除以10,然后换上em作为单位;
3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。
也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em,那么在声明p的字体大小时就只能是1em,而不是1.2em, 因为此em非彼em,它因继承#content的字体高而变为了1em=12px。
我们还需要注意的是:rem设置的字体大小并不会随着浏览器的屏幕的改变而改变,它的改变与浏览器本身有关。
最后为大家提供一个px,em,rem单位转换工具,地址:http://pxtoem.com/
以上是关于css中px,em和rem的区别的主要内容,如果未能解决你的问题,请参考以下文章