html5中px,em,rem区别

来源：互联网发布：天猫耐克官网抢鞋软件编辑：程序博客网时间：2024/06/02 03:37

PX为单位

在Web页面初期制作中，我们都是使用“px”来设置我们的文本，因为他比较稳定和精确。但是这种方法存在一个问题，当用户在浏览器中浏览我们制作的Web页面时，他改变了浏览器的字体大小，这时会使用我们的Web页面布局被打破。这样对于那些关心自己网站可用性的用户来说，就是一个大问题了。因此，这时就提出了使用“em”来定义Web页面的字体

一，Em为单位

这种技术需要一个参考点，一般都是以<body>的“font-size”为基准。比如说我们使用“1em”等于“10px”来改变默认值“1em=16px”，这样一来，我们设置字体大小相当于“14px”时，只需要将其值设置为“1.4em”。

[css] view plain copy print?

body{ font-size:62.5%;} /*10/16*100%*/
.font1{ font-size:1.2em;}
.font2{ font-size:12px;}

二，Rem为单位

CSS3的出现，他同时引进了一些新的单位，包括我们今天所说的rem。

前面说了“em”是相对于其父元素来设置字体大小的，这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小，在我们多次使用时，就会带来无法预知的错误风险。而rem是相对于根元素<html>

代码实例：

[css] view plain copy print?

html{font-size:62.5% ;}
.fon1{ font-size:1.2rem;}
.fon2{ font-size:12px;}

参考下图：

但也想兼容IE下的效果，可你可考虑“px”和“rem”一起使用，用"px"来实现IE6-8下的效果，然后使用“Rem”来实现代浏览器的效果

0 0