jQuery 调整窗口大小时自动调整文本大小（字体大小）？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2989950/
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
auto resize text (font size) when resizing window?
提问by Stephen
I have been trying(in vain) to build a page whose elements would resize as I changed the window size. I have it working in css for images no problem, but I can't seem to accomplish the same for text, and I am not sure it is even possible in CSS. And I can't seem to find a jquery script that accomplishes this.
我一直在尝试（徒劳无功）构建一个页面，该页面的元素会随着我更改窗口大小而调整大小。我让它在 css 中用于图像没问题，但我似乎无法为文本完成相同的工作，而且我不确定它是否可以在 CSS 中使用。而且我似乎找不到完成此操作的 jquery 脚本。
When a user resizes the window, I essentially want the page to scale dynamically and fluidly, without the user having to invoke page zoom. This works fine on my img divs via css, but not for the text, which stays the same size.
当用户调整窗口大小时，我基本上希望页面能够动态和流畅地缩放，而无需用户调用页面缩放。这通过 css 在我的 img div 上工作正常，但不适用于保持相同大小的文本。
Any ideas?
有任何想法吗？
回答by Lizzan
I've had to do this myself. What I did was that I set a base text size for the body, and percentages for all other sizes. I then used a simple jQuery script to change the base size on window resize. The other sizes then update as well.
我不得不自己做这件事。我所做的是为正文设置了基本文本大小，并为所有其他大小设置了百分比。然后我使用一个简单的 jQuery 脚本来更改窗口大小的基本大小。其他尺寸也会随之更新。
I used something like this:
我使用了这样的东西：
$(function() {
$(window).bind('resize', function()
{
resizeMe();
}).trigger('resize');
});
and in the resizeMe-function, I had this:
在 resizeMe 函数中，我有这个：
//Standard height, for which the body font size is correct
var preferredHeight = 768;
//Base font size for the page
var fontsize = 18;
var displayHeight = $(window).height();
var percentage = displayHeight / preferredHeight;
var newFontSize = Math.floor(fontsize * percentage) - 1;
$("body").css("font-size", newFontSize);
回答by Ryan McGeary
回答by roryf
You can do this with CSS3 media queries, specifying different base font-sizes depending on browser size. There is a good article for this on A List Apart
您可以使用CSS3 媒体查询来做到这一点，根据浏览器大小指定不同的基本字体大小。在A List Apart上有一篇很好的文章
For IE support you might be able to hack it using CSS expressions
对于 IE 支持，您可以使用CSS 表达式来破解它
This requires you to use a fixed base font-size, for instance on the bodytag, and percentage or embased sizes elsewhere.
这要求您使用固定的基本字体大小，例如在body标签上，以及em其他地方的百分比或基本大小。
回答by Tom S?derlund
Building on Lizzan's answer, here is a version using the square root of both width and heightto get a proportional sizing:
基于 Lizzan 的回答，这是一个使用宽度和高度的平方根来获得比例大小的版本：
// When document has finished loading
$(document).ready(function() {
var resizeText = function () {
// Standard height, for which the body font size is correct
var preferredFontSize = 180; // %
var preferredSize = 1024 * 768;
var currentSize = $(window).width() * $(window).height();
var scalePercentage = Math.sqrt(currentSize) / Math.sqrt(preferredSize);
var newFontSize = preferredFontSize * scalePercentage;
$("body").css("font-size", newFontSize + '%');
};
$(window).bind('resize', function() {
resizeText();
}).trigger('resize');
});
Demo: http://jsfiddle.net/tomsoderlund/26Gad/embedded/result/
回答by Peter Forster
I'm using the trick from http://practicaltypography.com/end-credits.html#bioM. Butterick:
我正在使用来自http://practicaltypography.com/end-credits.html#bioM. Butterick的技巧：
<style type="text/css">
<!--adattamento font-size a browser width-->
@media all {html {font-size: 24px;}}@media all and (max-width:2200px){html {font-size: 27px;}}@media all and (max-width:1800px){html {font-size: 26px;}}@media all and (max-width:1400px){html {font-size: 25px;}}@media all and (max-width:1000px){html {font-size: 24px;}}@media all and (max-width:960px){html {font-size: 23px;}}@media all and (max-width:920px){html {font-size: 22px;}}@media all and (max-width:880px){html {font-size: 21px;}}@media all and (max-width:840px){html {font-size: 20px;}}@media all and (max-width:800px){html {font-size: 19px;}}@media all and (max-width:760px){html {font-size: 18px;}}@media all and (max-width:720px){html {font-size: 17px;}}@media all and (max-width:680px){html {font-size: 16px;}}@media all and (max-width:640px){html {font-size: 15px;}}@media all and (max-width:600px){html {font-size: 14px;}}@media all and (max-width:560px){html {font-size: 13px;}}@media all and (max-width:520px){html {font-size: 12px;}}
<!--body-format-->
body {
max-width:1000px;
min-width:520px;
line-height:1.33em;
margin:1em;
background-color:#f7f7f7;
font-family:Source Sans Pro;
color:#361800;
}
</style>
回答by Martin Sookael
roryf is on the right track!
roryf 走在正确的轨道上！
Media Queries is (one of) the answer(s).
媒体查询是（其中一个）答案。
The trick here is to use % for font sizes everywhere starting from body. This way the font size get's inherited and when you change it in body, it get's changed everywhere.
这里的技巧是在从正文开始的任何地方使用 % 表示字体大小。这样字体大小就被继承了，当你在正文中改变它时，它会在任何地方改变。
Try something like:
尝试类似：
body { font-size: 100% }
h1 {font-size: 200% }
@media all and (max-width:600px) {
body {font-size: 70%}
}
When the website width gets smaller then 600px, then the font size will turn to 70% of what it was everywhere, where % is used (also h1 in this example.)
当网站宽度小于 600px 时，字体大小将变为使用 % 的所有地方的 70%（在此示例中也是 h1。）
回答by G.F.
You can make resizible text more simple. This solution works for me. http://jsfiddle.net/VooDi/dka48dx8/
您可以使可调整大小的文本更简单。这个解决方案对我有用。 http://jsfiddle.net/VooDi/dka48dx8/
For body set font-size, that equivalent to your current window inner width;
对于正文设置字体大小，相当于您当前窗口的内部宽度；
for jsfiddle 560 px;
对于 jsfiddle 560 像素；
body {
font-size: 560px;
}
js:
js：
onresize=onload=function() {
document.body.style.fontSize=window.innerWidth+"px"
}
and for needed element set font size in percent
并为所需的元素设置字体大小百分比
<h1 style="font-size:5%">Resize this text!!!!</h1>
Thats all. Hope this helps someone.
就这样。希望这可以帮助某人。
回答by Ultroman the Tacoman
Lizzans answer is perfect! Leave the -1 where it is! Kittens were dying all over the place when I removed it.
Lizzans的回答是完美的！将 -1 留在原处！当我把它移走时，小猫到处都是死的。
Instead of the fontsize variable, just set it to the standard fontsize for your page. Mine was 16.
而不是 fontsize 变量，只需将其设置为页面的标准字体大小。我的是16岁。
