如何使用纯CSS实现流体字体大小

Question

我有文字包裹在<div>s中,并希望使整个事物流畅,包括文本的字体大小,即文本调整自身以响应包含元素的大小.

我遇到了一个Javasript + CSS解决方案,但只是想知道是否可以用纯CSS做到这一点？

Answer 1

虽然吉姆已经向你提供了准确的信息,但它稍微偏离了问题.响应式设计(@media查询)可以根据屏幕大小更改文本.根据我的理解,您在询问是否存在用于流畅文本大小的纯CSS解决方案(在窗口大小更改期间不断调整文本大小).

这是css-tricks解释新字体大小调整技术的链接.请注意,这是新的,旧的浏览器很可能会遇到一些问题,即使是较新的浏览器(Chrome + Safari)仍然没有错误.

h1 {
  font-size: 5.9vw;
}
h2 {
  font-size: 3.0vh;
}
p {
  font-size: 2vmin;
}

编辑 - 添加代码

Answer 2

是的,看看CSS 3媒体查询.您可以根据视口宽度提供不同的样式规则.这包括改变字体大小.