调整窗口大小时自动调整文本大小(字体大小)？

Question

我一直在尝试(徒劳)构建一个页面,当我更改窗口大小时,其元素会调整大小.我有它在css工作的图像没有问题,但我似乎无法完成相同的文本,我不确定它甚至可能在CSS中.我似乎无法找到一个完成此任务的jquery脚本.

当用户调整窗口大小时,我基本上希望页面能够动态且流畅地扩展,而无需用户调用页面缩放.这可以通过css在我的img divs上正常工作,但对于保持相同大小的文本则不行.

有任何想法吗？

Answer 1

我自己必须这样做.我所做的是我为身体设置了基本文本大小,并为所有其他大小设置了百分比.然后我使用一个简单的jQuery脚本来改变窗口大小调整的基本大小.其他尺寸也会更新.

我使用过这样的东西:

$(function() {
    $(window).bind('resize', function()
    {
        resizeMe();
        }).trigger('resize');
    });

在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);

Answer 2

试试像FitText这样的jQuery插件.它会自动调整文本大小以适合父元素的宽度.

另一个具有相同目标的jQuery插件是BigText(演示).

Answer 3

您可以使用CSS3媒体查询执行此操作,根据浏览器大小指定不同的基本字体大小.A List Apart上有一篇很好的文章

对于IE支持,您可以使用CSS表达式来破解它

这要求您使用固定的基本字体大小,例如在body标记上,以及em其他地方的百分比或基本大小.

Answer 4

基于 Lizza 的答案，这是一个使用宽度和高度的平方根来获得比例尺寸的版本：

// 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');

});

演示： http: //jsfiddle.net/tomsoderlund/26Gad/embedded/result/