这是用于的项目：http : //phlak.github.com/jColorClock/。如您所见，现在文本大小只是设置为静态大小。我希望文本始终为窗口宽度的 90% 左右，但也要相应地缩放垂直大小。有没有相对简单的方法来做到这一点？
是否可以根据浏览器宽度动态缩放文本大小？
IT技术
javascript
html
css
xhtml
2021-01-19 16:25:40
6个回答
天啊！
<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();
});
因为您的字体大小是在 em（完美）中设置的，所以调整 body 元素的字体大小百分比充当通用的“文本缩放”。这将缩放 em 中设置的任何文本 - 如果您想更具体，您可以在<div>围绕要缩放的元素的a 上设置百分比字体大小。
这是一个简单的例子：http : //www.spookandpuff.com/examples/dynamicTextSize.html
CSS3 中添加了新的单位，这将允许您执行此操作。Sitepoint 有一个很好的概述。您肯定希望为旧浏览器提供后备，但这是迄今为止最简单的解决方案：
font-size: 35vmin;
当您不需要那么高的精度（例如，不同设备的几种尺寸）时，另一种选择是使用媒体查询。
与 Beejamin 的出色回答相同，但有一些调整。
对数学进行了调整，以便您可以设置不会发生缩放的“默认宽度”。这使得设计具有精确字体大小的给定宽度变得更容易。
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();
});
如果您使用 jQuery，您可能想尝试FitText。它使您可以轻松地将文本缩放到元素的宽度。
另一个选项是FlowType.JS，它以类似的方式工作。
其它你可能感兴趣的问题