css中rem和px的区别

在CSS中，我们经常会用到单位。其中两个常用的单位是rem和px。虽然它们的作用类似，但实际上它们有一些重要的区别。

p{
  font-size: 1rem;
}

首先，rem是相对单位，它的大小是相对于根元素(html)的字体大小。因此，当修改根元素的字体大小时，所有使用rem为单位的元素大小都将相应地调整。

html{
  font-size: 20px;
}
p{
  font-size: 1rem; /*等于20px*/
}

另一方面，px是绝对单位，它的大小始终保持不变。这意味着，当修改浏览器或设备的分辨率时，使用px为单位的元素大小将不会改变。

p{
  font-size: 16px;
}

除此之外，使用rem作为单位具有另一个重要的优势——可访问性。rem可以帮助用户改变字体大小，因此它是网站访问性的重要组成部分。用户可以通过改变浏览器设置，来自定义字体大小。

在选择使用rem或px作为单位时，必须考虑到不同情况下的优缺点。如果你需要一个绝对大小不变的东西，如边框或阴影，那么使用px是比较好的选择。如果你希望要灵活性并考虑到可访问性，那么使用rem就是更好的方案。