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

Question

我的文字包含在<div>中，并希望整个内容流畅，包括文本的字体大小，即文本根据包含元素的大小调整自身大小。

我遇到了Javasript + CSS solution，但只是想知道是否可以使用纯CSS来实现这一目标？

Answer 1

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

以下是css-tricks解释新font sizing techniques的链接。请注意，这是新的，旧的浏览器很可能会遇到一些问题，即使是较新的浏览器（Chrome + Safari）仍然没有错误。

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

编辑添加的代码

Answer 2

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

Answer 3

简答

您不能拥有流畅的字体大小，但是当viewport-percentage lengths广泛可用时，您将会这样做。

长答案

您必须了解以下两个术语：响应和流畅。

自适应表示您使样式表对不同的窗口大小做出不同的响应。这是通过使用CSS Media Queries完成的。虽然响应是网页设计中的 hippest 之一，但它主要意味着对不同绝对长度的CSS进行硬编码，直到你无聊为止。

流体表示您使用百分比等相对长度单位。使用相对长度单位时，每个大小都是自动计算的。

实施例

我们假设您在文档正文中有一个<div>，并且您希望它填充窗口的一半。

响应解决方案就是：

@media (max-width: 1px) {
  body > div {
    width: 0.5px;
  }
}

@media (max-width: 2px) {
  body > div {
    width: 1px;
  }
}

@media (max-width: 3px) {
  body > div {
    width: 1.5px;
  }
}

@media (max-width: 4px) {
  body > div {
    width: 2px;
  }
}

/* Repeat until you reach gigabytes and hit operating systems' file size limitations. */

流体解决方案：

body > div {
  width: 50%;
}

因此？

今天限制我们的是视口相对长度单位没有广泛的支持。你能做的就是完全理解＆＃34;纯CSS 流畅字体大小＆＃34;然后响应。

Answer 4

将calc与媒体查询结合使用，以获取响应流畅的字体

@media screen and (min-width: 25em){
  div {  
    font-size: calc( 16px + (24 - 16) * (100vw - 400px) / (800 - 400) );
  }
}