Css rem和px

来源：互联网发布：火柴人动画软件编辑：程序博客网时间：2024/05/16 15:46

px是指屏幕上尺寸大小，是确定的尺寸。

em是指相对于父元素的尺寸，是相对的单位。

而rem是在em的基础上，css3新增加的，指相对于根元素的尺寸，是相对尺寸。

rem的优点是所有的元素大小都是一个倍数，相对于根元素的倍数，所以只需要修改根元素，所有的元素都可以变化。可以适应不同的设备分辨率。

缺点是IE6、IE7、IE8不支持这个标签。

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

在根元素<html>中定义了一个基本字体大小为62.5%（也就是10px。设置这个值主要方便计算，如果没有设置，将是以“16px”为基准）。从上面的计算结果，我们使用“rem”就像使用“px”一样的方便，而且同时解决了“px”和“em”两者不同之处。

html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/}
body {font-size: 1.4rem;/*1.4 × 10px = 14px */}
h1 { font-size: 2.4rem;/*2.4 × 10px = 24px*/}

0 0