css中怎样让文字自适应大小

在CSS中，我们可以使用font-size属性来控制文字的大小。但是当页面大小发生改变或者用户使用不同的设备查看网页时，文字大小也需要相应地改变以适应不同的屏幕尺寸。以下是一些让文字自适应大小的技巧：

/*通过vw(vieport width)来设置字体大小，1vw等于视口的1/100宽度*/
body {
  font-size: 2vw;
} 

上述代码会让页面中的文字大小自动根据视口的大小调整。如果视口的宽度是1000px，那么文字大小就是20px（也就是2vw x 1000px）。

/*使用媒体查询来设置不同屏幕下的字体大小*/
@media screen and (max-width: 768px) {
  body {
    font-size: 16px;
  }
}
@media screen and (min-width: 768px) {
  body {
    font-size: 20px;
  }
} 

上述代码会在不同尺寸的视口下分别设置不同的字体大小。当视口宽度小于768px时，文字大小为16px；当视口宽度大于等于768px时，文字大小为20px。

/*使用rem来设置字体大小，基准值为html的font-size*/
html {
  font-size: 16px;
}
body {
  font-size: 1.5rem;
} 

上述代码会在不同屏幕下设置字体大小，但是这里使用了rem（root em）单位而不是像素或百分比。rem的基准值是html的font-size属性，也就是说当html的font-size为16px时，body的字体大小为24px（1.5rem x 16px）。

通过上述技巧，我们可以使页面中的文字大小自适应不同的屏幕尺寸，从而达到更好的用户体验。