Html 如何使用纯 CSS 实现流体字体大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12059530/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to implement fluid font size using pure CSS
提问by skyork
I have text wrapped in <div>s, and would like to make the whole thing fluid including the font-size of the text, i.e. the text resizes itself in response to the size of the containing element.
我将文本包裹在<div>s 中，并希望使整个内容变得流畅，包括文本的字体大小，即文本根据包含元素的大小调整自身大小。
I came across a Javasript + CSS solution, but just wondering if it is possible to do so with pure CSS?
我遇到了一个Javasript + CSS 解决方案，但只是想知道是否可以使用纯 CSS 来做到这一点？
采纳答案by Jim
Yes, look at CSS 3 media queries. You can provide different style rules depending on the viewport width. This includes altering the font size.
是的，看看 CSS 3 媒体查询。您可以根据视口宽度提供不同的样式规则。这包括改变字体大小。
回答by Brett Santore
While Jim has given you accurate information, it strays from the question asked slightly. Responsive design (@media queries) can alter the text according to screen size. From what I understand, you were asking if there is a pure CSS solution for fluid text size (continual resizing of text during window size changes).
虽然吉姆为您提供了准确的信息，但它略微偏离了所提出的问题。响应式设计（@media 查询）可以根据屏幕大小更改文本。据我了解，您问的是是否有针对流体文本大小的纯 CSS 解决方案（在窗口大小更改期间不断调整文本大小）。
Here is a link to css-tricks explanation of new font sizing techniques. Please be aware this is new and older browsers will most likely have some issues, and that even newer ones (Chrome + Safari) are still not bug-free.
这是新字体大小调整技术的css-tricks 解释的链接。请注意，这是新的和旧的浏览器很可能会出现一些问题，即使是较新的浏览器（Chrome + Safari）仍然没有错误。
h1 {
font-size: 5.9vw;
}
h2 {
font-size: 3.0vh;
}
p {
font-size: 2vmin;
}
Edit- added code
编辑添加的代码
回答by AlicanC
Short Answer
简答
You can't have fluid font sizes, but you will when viewport-percentage lengthsare widely available.
您不能拥有流畅的字体大小，但当视口百分比长度广泛可用时，您就会拥有流畅的字体大小。
Long Answer
长答案
You have to understand these two terms: responsiveand fluid.
你必须理解这两个术语：responsive和fluid。
Responsivemeans you make your stylesheet respond differently to different window sizes. This is done by using CSS Media Queries. While responsive is one of the hippestwords in web design, it mostly means hardcoding CSS for different absolute lengths until you drop dead of boredom.
响应式意味着您可以让样式表对不同的窗口大小做出不同的响应。这是通过使用CSS 媒体查询来完成的。虽然响应式是网页设计中最时髦的词之一，但它主要意味着硬编码 CSS 以获得不同的绝对长度，直到你厌倦为止。
Fluidmeans you work with relative length units such as percentages. When you work with relative length units, every size is calculated automagically.
流动意味着您使用相对长度单位，例如百分比。当您使用相对长度单位时，每个尺寸都会自动计算。
Example
例子
Let's say you have a <div>inside the document body and you want it to fill half of the window.
假设您<div>在文档正文中有一个，并且您希望它填满窗口的一半。
The responsivesolution is this:
该响应的解决方案是这样的：
@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. */
And the fluidsolution:
和流体解决方案：
body > div {
width: 50%;
}
So?
所以？
What limits us today is that there is no wide support for viewport-relative length units. What you can do is drop the whole idea of "pure CSS fluidfont sizes" and go responsive.
今天限制我们的是没有广泛支持视口相对长度单位。您可以做的是放弃“纯 CSS流体字体大小”的整个想法，并进行响应。
回答by static_null
use calc with media query for a responsive and fluid font
将 calc 与媒体查询一起使用以获得响应性和流畅的字体
@media screen and (min-width: 25em){
div {
font-size: calc( 16px + (24 - 16) * (100vw - 400px) / (800 - 400) );
}
}
