当调整窗口大小时，是否可以自动调整文本（字体大小）？

Question

当调整窗口大小时，是否可以自动调整文本（字体大小）？

jquerycsstextresizefluid-layout

15

我一直试图构建一个页面，使其元素能够随着窗口大小的改变而调整大小。对于图像，我已经在 CSS 中解决了这个问题，但是对于文本似乎无法做到并且我不确定在 CSS 中是否可以实现。而且我似乎也找不到一个能够实现这种效果的 JQuery 脚本。

当用户调整窗口大小时，我希望页面能够动态流畅地缩放，而不需要用户启动页面缩放。我的 img div 在 CSS 中可以正常工作，但文本则保持相同大小。

有什么想法吗？

- Stephen

你目前有什么代码？ - ryanulit

9个回答

12

试用 jQuery 插件，例如 FitText。它会自动调整文本大小以适应父元素的宽度。

另一个具有同样目标的 jQuery 插件是 BigText（演示）。

- Ryan McGeary

7

您可以使用 CSS3媒体查询，根据浏览器尺寸指定不同的基础字体大小来实现此操作。A List Apart上有一篇很好的文章介绍了这一点。

对于IE支持，您可能可以使用CSS表达式进行hack。

这需要您使用固定的基础字体大小，例如在 body 标记上，以及其他地方使用百分比或 em 基础大小。

- roryf

5

在Lizzan的回答基础上，这里提供一种使用宽度和高度的平方根来实现比例缩放的版本：

// 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/

- Tom Söderlund

3

roryf 正在走上正确的道路！

媒体查询是其中一个答案。

这里的诀窍是从 body 开始，到处使用 % 作为字体大小。这样字体大小就会被继承，当你在 body 中更改它时，它就会在所有地方都更改。

尝试像这样：

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

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

当网站宽度小于600像素时，使用%单位的字体大小将变为原来的70％（包括此示例中的h1）。

- Martin Sookael

3

我正在使用M. Butterick在http://practicaltypography.com/end-credits.html#bio中提供的技巧：

    <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>

- Peter Forster

1

你可能需要提供更多的上下文，并阅读如何撰写优秀回答中的“为链接提供上下文”一段。 - IInspectable

我只复制了字体大小的那一行...真是个好的解决方案 :) - oak

0

Lizzans的回答非常完美！把-1留在原地！当我移除它时，小猫们都在死去。

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

- Ultroman the Tacoman

0

你可以让可调整大小的文本变得更简单。这个解决方案适合我。 http://jsfiddle.net/VooDi/dka48dx8/

对于body，设置字体大小等于你当前窗口的内部宽度；

对于jsfiddle为560像素；

body {
    font-size: 560px; 
}

js：

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

并且对于所需的元素，设置百分比字体大小

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

就是这样了。希望能对某些人有所帮助。

- G.F.

0

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

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

- code-8

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Lizzan · Accepted Answer

我自己也曾经需要这样做。我的方法是设置了一个基础文字大小，然后使用百分比来设置其他所有的大小。接着我使用了一个简单的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);