html 字号自适应,CSS中的自适应字体大小

在CSS中实现字号自适应的方式有多种，其中比较常见的有以下几种：

1. 使用相对单位：使用相对单位（如em、rem、vw等）来设置字体大小，可以根据浏览器窗口大小自动调整字体大小。例如：

body {
  font-size: 16px;
}

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

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

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

上面的代码中，使用em单位来设置字体大小，h1元素的字体大小为父元素字体大小的2倍，p元素的字体大小为父元素字体大小的1.2倍。同时，使用@media查询来在不同的屏幕尺寸下设置不同的字体大小。

2. 使用viewport单位：使用viewport单位（如vw、vh）来设置字体大小，可以根据浏览器窗口大小自动调整字体大小，而不是根据父元素大小调整。例如：

h1 {
  font-size: 5vw; /* 相当于视口宽度的5% */
}

p {
  font-size: 3vh; /* 相当于视口高度的3% */
}

上面的代码中，使用viewport单位来设置字体大小，h1元素的字体大小为视口宽度的5%，p元素的字体大小为视口高度的3%。

3. 使用JavaScript：使用JavaScript来获取浏览器窗口大小，并根据窗口大小动态设置字体大小。例如：

function setFontSize() {
  var screenWidth = window.innerWidth;
  var fontSize = screenWidth / 20; /* 根据实际情况调整比例 */
  document.body.style.fontSize = fontSize + 'px';
}

window.addEventListener('resize', setFontSize);
setFontSize();

上面的代码中，使用JavaScript来获取浏览器窗口大小，并根据窗口大小动态设置字体大小。同时，使用resize事件来在窗口大小变化时重新设置字体大小。