Html 如何在 CSS3 或 javascript 中与窗口的更改大小成比例地更改字体大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16385559/
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 change the font-size proportionally to the change size of the window in CSS3 or javascript
提问by Misha Timofeev
I do some web app and i have some problem with font-size. How to change the font-sizeproportionally to the change size of the window in CSS3 or javascript?
我做了一些网络应用程序，但我对font-size有一些问题。如何在 CSS3 或 javascript 中与窗口的更改大小成比例地更改字体大小？
采纳答案by Ana Sampaio
You have 3 ways to do it:
你有 3 种方法来做到这一点：
- Using http://fittextjs.com/, but pages can start to be slower
- Using media queries
- Using ems
- 使用http://fittextjs.com/，但页面可能开始变慢
- 使用媒体查询
- 使用 em
Now, it depends on what you want to be your final result. I'd go to option no 3.
现在，这取决于你想成为你的最终结果。我会选择选项 3。
回答by Matt Patenaude
The ideal way to do this is using the vwunit, which is defined as 1/100th of the viewport width(hence the name). So, for instance, if you wanted your text to be 4.5% of the browser's width at all times, you could use the size:
执行此操作的理想方法是使用vw单位，该单位定义为视口宽度的1/100 （因此得名）。因此，例如，如果您希望文本始终为浏览器宽度的 4.5%，则可以使用大小：
font-size: 4.5vw;
… and theoretically, that should work. Unfortunately, you'll find, it doesn't quite work as expected: there's a bug in WebKit browsers (at least) where the value for font size isn't live-updating (although it is for all other dimensions). You need to trigger a repaint in order for the font size to change, which can be done by updating the z-indexproperty from JavaScript:
...从理论上讲，这应该可行。不幸的是，您会发现它并没有像预期的那样工作：WebKit 浏览器中存在一个错误（至少），字体大小的值不是实时更新的（尽管它适用于所有其他维度）。您需要触发重绘以更改字体大小，这可以通过z-index从 JavaScript更新属性来完成：
window.addEventListener('resize', function(){
document.getElementById('myEl').style.zIndex = '1';
}, false);
This may create a little bit of choppiness, but it means you don't have to calculate any actual dimensions in JavaScript, and you don't need to used "stepped" sizes like with media queries.
这可能会造成一些波动，但这意味着您不必在 JavaScript 中计算任何实际尺寸，也不需要像媒体查询那样使用“阶梯式”尺寸。
回答by PalDev
The ideal way to do so is to combine between the VW font-size and @media queries. Reasons are:
这样做的理想方法是结合 VW 字体大小和 @media 查询。原因是：
1) em for itself won't rescale by window size
1) em 本身不会按窗口大小重新缩放
2) vm for itself will be too small for resolutions / screens lower than 800px.
2) 对于低于 800px 的分辨率/屏幕，vm 本身会太小。
So the right way to achieve this is:
因此，实现这一目标的正确方法是：
- Define a class - prop-text with VM=1.0 for your desired screen width
- Add media queries to fit the font-size with your desired lower resolution grids.
- 为您所需的屏幕宽度定义一个类 - 带有 VM=1.0 的 prop-text
- 添加媒体查询以适合您所需的较低分辨率网格的字体大小。
For my responsive grid (which sets a 1/2 column to take 100% width below 768px width) it looks like that:
对于我的响应式网格（将 1/2 列设置为 768px 宽度以下的 100% 宽度），它看起来像这样：
<style>
.prop-text{font-size:1.0vw}
@media (max-width : 768px) {
.prop-text{font-size:2.0vw}
}
/*other media queries here - fit font size to smartphone resolutions */
</style>
<div class="prop-text">your text is here</div>
回答by Nelson
Set your base font size (the one you define for your bodyelement in css) in pxthen everywhere in the rest of your page set font sizes relative to that one using emunit, then you can use media queries to change the font sizes of all your pages by just changing your base font, something like this:
设置您的基本字体大小（您body在 css 中为元素定义的那个）px然后在页面其余部分的任何地方设置相对于使用em单位的字体大小，然后您可以使用媒体查询来更改所有页面的字体大小只需更改您的基本字体，如下所示：
body {
font-size: 15px;
}
@media (max-width: 1000px) {
body { font-size: 1.3em; }
}
@media (max-width: 500px) {
body { font-size: 1.1; }
}
回答by Prometal328
I think the best way might be vh, beeing that font-sizechanges the height of the text. Using vhmeans that the text will always foolow the size of the page, even if the user resizes the pageor the screen is small.
我认为最好的方法可能是vh，因为字体大小会改变文本的高度。使用vh意味着即使用户调整页面大小或屏幕很小，文本也将始终愚弄页面的大小。
