17

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

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

4

4 回答 4

34

虽然吉姆给了你准确的信息，但它与所提出的问题略有不同。响应式设计（@media 查询）可以根据屏幕大小改变文本。据我了解，您问的是是否有纯 CSS 解决方案可用于流畅的文本大小（在窗口大小更改期间不断调整文本大小）。

这是新字体大小技术的 css-tricks 解释的链接。请注意，这是新的和旧的浏览器很可能会出现一些问题，甚至更新的浏览器（Chrome + Safari）仍然不是没有错误的。

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

编辑添加的代码

于 2012-11-30T18:48:03.820 回答
6

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

于 2012-08-21T17:11:20.673 回答
2

简答

你不能有流畅的字体大小，但是当视口百分比长度广泛可用时你会。

长答案

您必须了解这两个术语：响应式和流畅性。

响应式意味着您让样式表对不同的窗口大小做出不同的响应。这是通过使用CSS Media Queries完成的。虽然响应式是网页设计中最时髦的词之一，但它主要意味着将 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%;
}

所以？

今天限制我们的是，对视口相对长度单位没有广泛的支持。你能做的就是放弃“纯 CSS流体字体大小”的整个想法，转而使用响应式。

于 2014-08-16T13:42:10.673 回答
1

将 calc 与媒体查询一起使用以获得响应式和流畅的字体

@media screen and (min-width: 25em){
  div {  
    font-size: calc( 16px + (24 - 16) * (100vw - 400px) / (800 - 400) );
  }
}
于 2018-07-15T11:20:51.040 回答