web端 字体自适应屏幕

实现网页字体自适应屏幕大小有多种方法，以下是其中的一些：

1. 使用CSS3的Viewport单位，如vh、vw、vmin、vmax等。这些单位是相对于视口（viewport）的宽度或高度进行计算的，可以根据屏幕大小动态调整字体大小。

body {
  font-size: 4vw; /* 4% of viewport width */
}

2. 使用媒体查询（Media Query）来根据屏幕宽度设置不同的字体大小。

@media screen and (max-width: 768px) {
  body {
    font-size: 16px;
  }
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
  body {
    font-size: 18px;
  }
}

@media screen and (min-width: 1025px) {
  body {
    font-size: 20px;
  }
}

3. 使用JavaScript来动态计算屏幕大小，然后设置字体大小。

var screenWidth = window.innerWidth;
var fontSize = screenWidth * 0.04; // 4% of screen width
document.body.style.fontSize = fontSize + 'px';

以上方法各有优缺点，可以根据实际需求选择适合的方式。