是否可以根据浏览器宽度动态缩放文字大小？ [英] Is it possible to dynamically scale text size based on browser width?
问题描述
这是此项目的用途： http://phlak.github.com/jColorClock/ 。正如你可以看到，现在的文本大小只是设置为静态大小。我希望文本总是窗口的宽度的〜90％，但也相应地缩放垂直大小。是否有相对容易的方法这样做？
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?
推荐答案
地狱是！
使用一些javascript调整窗口大小时，请设置< body> 字体大小。 （我使用jQuery为了方便起见：
Set your <body> font size when the window is resized with a little javascript. (I've used jQuery for convenience here:
$( 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();
});
因为你的字体大小设置在em的（完美的）调整body元素的font-size充当通用的文本缩放。这将缩放em中的任何文本集 - 如果你想要更具体，你可以设置百分比font-size在< div>
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.
这里有一个简单的例子： http：// www.spookandpuff.com/examples/dynamicTextSize.html
Here's a quick example: http://www.spookandpuff.com/examples/dynamicTextSize.html
这篇关于是否可以根据浏览器宽度动态缩放文字大小？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
