CSS中px em rem区别与使用

当我们设计网页时,经常需要指定元素的大小,字体大小等,而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的空白区域。

本文标题为:CSS中px em rem区别与使用

基础教程推荐