调整窗口大小时自动调整文本大小（字体大小）？

Question

我一直在尝试（徒劳地）构建一个页面，其元素会随着我更改窗口大小而调整大小。我让它在图像的 CSS 中工作没有问题，但我似乎无法在文本中完成同样的工作，而且我不确定它在 CSS 中是否可能。我似乎找不到一个 jquery 脚本来完成这个任务。

当用户调整窗口大小时，我本质上希望页面动态且流畅地缩放，而用户不必调用页面缩放。这对于通过 css 的 img div 效果很好，但对于文本则不然，文本大小保持不变。

有什么想法吗？

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/

Answer 5

我正在使用 http://practicaltypography.com/end-credits.html#bio< 中的技巧/a> M.巴特里克：

    <style type="text/css">
<!--adattamento font-size a browser width-->
        @media all {html {font-size: 24px;}}@media all and (max-width:2200px){html {font-size: 27px;}}@media all and (max-width:1800px){html {font-size: 26px;}}@media all and (max-width:1400px){html {font-size: 25px;}}@media all and (max-width:1000px){html {font-size: 24px;}}@media all and (max-width:960px){html {font-size: 23px;}}@media all and (max-width:920px){html {font-size: 22px;}}@media all and (max-width:880px){html {font-size: 21px;}}@media all and (max-width:840px){html {font-size: 20px;}}@media all and (max-width:800px){html {font-size: 19px;}}@media all and (max-width:760px){html {font-size: 18px;}}@media all and (max-width:720px){html {font-size: 17px;}}@media all and (max-width:680px){html {font-size: 16px;}}@media all and (max-width:640px){html {font-size: 15px;}}@media all and (max-width:600px){html {font-size: 14px;}}@media all and (max-width:560px){html {font-size: 13px;}}@media all and (max-width:520px){html {font-size: 12px;}}
<!--body-format-->
            body {
        max-width:1000px;
        min-width:520px;
        line-height:1.33em;
        margin:1em;
        background-color:#f7f7f7;
        font-family:Source Sans Pro;
        color:#361800;
        }
    </style>

Answer 6

roryf 走在正确的道路上！

媒体查询是答案（之一）。

这里的技巧是从正文开始使用 % 表示字体大小。这样字体大小就会被继承，当你在正文中更改它时，它会在各处发生变化。

尝试如下：

body { font-size: 100% }
h1 {font-size: 200% }

@media all and (max-width:600px) {
    body {font-size: 70%}
}

当网站宽度小于 600px 时，字体大小将变为原来大小的 70%，其中使用 %（本例中也使用 h1。）

Answer 7

利赞的回答很完美！将 -1 保留在原来的位置！当我把它移走时，小猫们都死了。

只需将其设置为页面的标准字体大小即可，而不是使用 fontsize 变量。我的是16岁。

Answer 8

您可以使可调整大小的文本变得更加简单。这个解决方案对我有用。
http://jsfiddle.net/VooDi/dka48dx8/

对于body设置font-size，相当于您当前的窗口内部宽度；

对于 jsfiddle 560 px；

body {
    font-size: 560px; 
}

js：

onresize=onload=function() {
    document.body.style.fontSize=window.innerWidth+"px"
}

并为所需的元素设置字体大小（以百分比为单位）

<h1 style="font-size:5%">Resize this text!!!!</h1>

仅此而已。希望这对某人有帮助。

Answer 9

看看这个：https://jsfiddle.net/bheng/dp5jh7nu/

$("h1").css("font-size", $(window).width()/5);
$(window).resize(function() {
    $("h1").css("font-size", $(window).width()/5);
});