CSS中px em rem区别与使用

当我们设计网页时，经常需要指定元素的大小，字体大小等，而CSS中提供了三种单位：px、em和rem。本篇攻略将详细讲解这三种单位的区别和应用场合。

px单位

px（Pixel）是像素单位，也是CSS中最常用的单位。指定某元素的大小时，使用的就是px。px的大小是相对于显示器屏幕分辨率而言的，即1px等于显示器上的一个物理像素点。

例如，我们定义一个宽度为200px的DIV，它的大小就是屏幕上的200个物理像素点。

div{
  width:200px;
}

em单位

em是相对单位。它是基于元素自身的字体大小（font-size）来计算的。例如，如果某个div元素的font-size为16px，那么1em就相当于16px。如果我们将div内的文字内容字体大小设为1.2em，则它的大小就是1.2*16=19.2px。

div{
  font-size:16px;
  width:20em; /*宽度为320px*/
  font-size:1.2em; /*字体大小为19.2px*/
}

em相对一个父元素的字体大小来计算，如果没有定义默认是16px。

rem单位

rem也是相对单位，与em不同的是，它是相对于根元素（html）的字体大小而言的。html中font-size默认16px，如果我们将html中的font-size设为20px，则1rem就等于20px。因此，rem的值更稳定，适合移动端的设计。

html{
  font-size:20px;
}
div{
  width:20rem; /*宽度为400px*/
  font-size:1.2rem; /*字体大小为24px*/
}

在设计响应式页面时，rem单位十分有用。根据不同的设备尺寸，我们只需要在html中设定一个不同的font-size，元素的大小和字体大小就会自动应用相应的值。

总结

• px是绝对单位，不随字体大小变化而变化，应用于设计固定的元素大小；
• em是相对单位，相对于父元素字体大小而言，应用于动态改变字体大小的元素（例如标题等）；
• rem也是相对单位，相对于根元素字体大小而言，应用于移动端设计和响应式设计。

应用场景需要根据实际情况而定，下列的两个示例可以帮助更好理解：

示例1：

div{
  font-size:1em;  /* 1em = 16px */
  line-height:2em;  /* 2em = 32px */
  text-align:center;
  padding:20px;
}

在这个示例中，字体大小、行高、内边距等都是用em作为单位，并且没配合rem使用。因此，整个页面的布局会随着根元素中font-size的变化而变化。

示例2：

html{
  font-size:18px;
}
div{
  font-size:1.2rem;
  margin:1rem;
}

在这个示例中，根元素html的font-size被设置为18px，因此1rem就等于18px。div中的字体大小是1.2rem，这时候就等于1.2*18=21.6px，符合设计需求。此外，margin也被设置为1rem，因此div四周各有18px的空白区域。