css字体大小自适应

作者：惨美歌发布日期:2025-04-30 浏览:89

/* 使用 vw 单位使字体大小自适应视口宽度 */
html {
  font-size: 16px; /* 设置一个基础字体大小 */
}

body {
  font-size: 1rem; /* 继承 html 的字体大小 */
}

h1 {
  font-size: 5vw; /* 根据视口宽度调整字体大小，1vw 等于视口宽度的 1% */
}

p {
  font-size: 2vw; /* 同样根据视口宽度调整字体大小 */
}

/* 使用 clamp() 函数实现更复杂的自适应字体大小 */
h2 {
  font-size: clamp(1rem, 8vw, 3rem); /* 最小字体为 1rem，最大字体为 3rem，中间根据视口宽度线性变化 */
}

解释说明：

vw 单位：vw 是相对于视口宽度的单位，1vw 等于视口宽度的 1%。通过使用 vw 单位，字体大小会随着视口宽度的变化而自动调整。
clamp() 函数：clamp() 函数允许你设置一个最小值、理想值和最大值。字体大小会在这些值之间根据视口宽度线性变化，确保字体不会过小或过大。

如果需要进一步调整，可以根据具体需求修改 vw 或 clamp() 中的参数。

上一篇：css 背景颜色透明度

下一篇：css translate3d