Javascript 是否可以根据浏览器宽度动态缩放文本大小？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5358183/
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
Is it possible to dynamically scale text size based on browser width?
提问by PHLAK
Here is the project this is for: http://phlak.github.com/jColorClock/. As you can see, right now the text size is just set to a static size. I'd like the text to always be ~90% of the width of the window but to also scale the vertical size accordingly. Is there a relatively easy way of doing this?
这是用于的项目：http: //phlak.github.com/jColorClock/。如您所见，现在文本大小只是设置为静态大小。我希望文本始终为窗口宽度的 90% 左右，但也要相应地缩放垂直大小。有没有相对简单的方法来做到这一点？
回答by Ben Hull
Hell yeah!
该死的！
Set your <body>font size when the window is resized with a little javascript. (I've used jQuery for convenience here:
<body>使用一些 javascript 调整窗口大小时设置字体大小。（为了方便起见，我在这里使用了 jQuery：
$( document ).ready( function() {
var $body = $('body'); //Cache this for performance
var setBodyScale = function() {
var scaleSource = $body.width(),
scaleFactor = 0.35,
maxScale = 600,
minScale = 30; //Tweak these values to taste
var fontSize = scaleSource * scaleFactor; //Multiply the width of the body by the scaling factor:
if (fontSize > maxScale) fontSize = maxScale;
if (fontSize < minScale) fontSize = minScale; //Enforce the minimum and maximums
$('body').css('font-size', fontSize + '%');
}
$(window).resize(function(){
setBodyScale();
});
//Fire it when the page first loads:
setBodyScale();
});
Because your font size is set in em's (perfect) adjusting the percentage font-size of the body element acts as a universal 'text zoom'. This will scale any text set in em's - if you want to be more specific, you could set the percentage font-size on a <div>that surrounds just the elements you want to scale.
因为您的字体大小是在 em（完美）中设置的，所以调整 body 元素的字体大小百分比充当通用的“文本缩放”。这将缩放 em 中设置的任何文本 - 如果您想更具体，您可以在<div>围绕您要缩放的元素的a 上设置百分比字体大小。
Here's a quick example: http://www.spookandpuff.com/examples/dynamicTextSize.html
这是一个简单的例子：http: //www.spookandpuff.com/examples/dynamicTextSize.html
回答by Stephen M. Harris
New units were added in CSS3 that will allow you to do this. Sitepoint has a good overview. You definitely want to provide a fallback for older browsers, but this is by far the simplest solution:
CSS3 中添加了新的单位，这将允许您执行此操作。Sitepoint 有一个很好的概述。您肯定希望为旧浏览器提供后备，但这是迄今为止最简单的解决方案：
font-size: 35vmin;
回答by sbirch
Another option for when you don't need as much precision (say, a couple sizes for different devices) is to use media queries.
当您不需要那么高的精度（例如，不同设备的几种尺寸）时，另一种选择是使用媒体查询。
回答by Raine Revere
Same as Beejamin's excellent answer, with a couple tweaks.
与 Beejamin 的出色回答相同，但有一些调整。
The math was adjusted so that you can set the "default width" at which no scaling will occur. This makes it easier to design to a given width with exact font-sizes.
The font-size is now set on the html element freeing up the body element to hold a font-size in the css.
对数学进行了调整，以便您可以设置不会发生缩放的“默认宽度”。这使得设计具有精确字体大小的给定宽度变得更容易。
font-size 现在设置在 html 元素上，释放 body 元素以在 css 中保存 font-size。
$(function() {
// At this width, no scaling occurs. Above/below will scale appropriately.
var defaultWidth = 1280;
// This controls how fast the font-size scales. If 1, will scale at the same
// rate as the window (i.e. when the window is 50% of the default width, the
// font-size will be scaled 50%). If I want the font to not shrink as rapidly
// when the page gets smaller, I can set this to a smaller number (e.g. at 0.5,
// when the window is 50% of default width, the font-size will be scaled 75%).
var scaleFactor = 0.5;
// choose a maximum and minimum scale factor (e.g. 4 is 400% and 0.5 is 50%)
var maxScale = 4;
var minScale = 0.5;
var $html = $("html");
var setHtmlScale = function() {
var scale = 1 + scaleFactor * ($html.width() - defaultWidth) / defaultWidth;
if (scale > maxScale) {
scale = maxScale;
}
else if (scale < minScale) {
scale = minScale;
}
$html.css('font-size', scale * 100 + '%');
};
$(window).resize(function() {
setHtmlScale();
});
setHtmlScale();
});
回答by Ben
If you use jQuery you might want to try FitText. It lets you scale text to the width of the element really easily.
如果您使用 jQuery，您可能想尝试FitText。它使您可以轻松地将文本缩放到元素的宽度。
The other option is FlowType.JSwhich works in a similar way.
另一个选项是FlowType.JS，它以类似的方式工作。
回答by frontsideup
- With consistent cross browser compatibility
- Without breaking or disrupting the browser's zoom accessibility.
- Without altering style attributes.
- without blurring fonts.
- Without browser sniffing.
- Works on OSX maximize and restore.
- With callbacks to detect browser's zoom level.
- 具有一致的跨浏览器兼容性
- 不会破坏或破坏浏览器的缩放可访问性。
- 不改变样式属性。
- 没有模糊字体。
- 没有浏览器嗅探。
- 适用于 OSX 最大化和还原。
- 使用回调来检测浏览器的缩放级别。
Try Mimetic.js
