[分享]css中字体断层用rem

CSS中字体断层是指在不同屏幕尺寸下，同一段文字中出现字体大小不一致的现象。为了解决这个问题，我们通常会使用rem单位。html { fontsize: 16px; } p { fontsize: 1...

CSS中字体断层是指在不同屏幕尺寸下，同一段文字中出现字体大小不一致的现象。为了解决这个问题，我们通常会使用rem单位。

html {
  font-size: 16px;
}

p {
  font-size: 1.2rem; /*相当于16*1.2=19.2px*/
} 

在上面的代码中，我们将根元素(html)的字体大小设置为16px，这是我们通常所用的基础字体大小。然后，我们将p标签的字体大小设置为1.2rem。这意味着在任何设备上，p标签的字体大小都将是16px的1.2倍。

这种做法的好处是，无论屏幕尺寸有多大或多小，我们都可以通过基础字体大小来设置字体大小，从而避免出现字体断层的情况。

h1 {
  font-size: 2rem; /*相当于16*2=32px*/
} 

我们还可以将rem单位用在其他元素上，比如h1标签，如上面的代码所示。这意味着无论在什么设备上，h1标签的字体大小都将是16px的2倍。

总之，通过在CSS中使用rem单位，我们可以避免字体断层的出现，使得我们的网站在不同设备上都可以获得一致的视觉效果。