PHL*_*LAK 27 html javascript css xhtml
这是以下项目:http://phlak.github.com/jColorClock/.如您所见,现在文本大小只是设置为静态大小.我希望文本始终是窗口宽度的~90%,但也要相应地缩放垂直尺寸.有一个相对简单的方法吗？
Ben*_*ull 47
地狱啊!
<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>,只围绕您想要缩放的元素.
这是一个简单的例子:http://www.spookandpuff.com/examples/dynamicTextSize.html
Ste*_*ris 12
CSS3中添加了新单元,允许您执行此操作.Sitepoint有一个很好的概述.您肯定希望为旧版浏览器提供后备,但这是迄今为止最简单的解决方案:
font-size: 35vmin;
与Beejamin的优秀答案相同,有几个调整.
调整了数学运算,以便您可以设置不会进行缩放的"默认宽度".这样可以更容易地使用精确的字体大小设计到给定的宽度.
现在在html元素上设置font-size,释放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();
});