Question

我正在整理一个网站，其中一个网页就是一本书。

我有一个内容div，它以页面纸为背景。在这里面我有一个iframe来拉出不同的文本页面。我已经将div的宽度和高度设置为％，但是我的文本大小有问题。由于书的性质，内容必须非常静态，但同时必须按比例缩放以匹配屏幕尺寸。

我已经尝试过乱搞jQuery，但无法将其拉下来。非常感谢有关如何使用jQuery缩放文本的任何提示，或者是否有人更好地了解如何显示图书。

Answer 1

我知道这不是一个jQuery解决方案，但您是否考虑过使用CSS Media查询？

http://css-tricks.com/css-media-queries/

.somediv { font-size: 100%; }

@media all and (max-width: 500px) {
    .somediv { font-size: 80%; }
}

@media all and (max-width: 800px) and (min-width: 501px) {
    .somediv { font-size: 90%; }
}

这会根据当前宽度更改字体大小，并且对于较小的分辨率会更低。低于500像素？ 80％。在800到501像素之间？ 90％。另外标准100％。

不确定这是否适用于iframe，但值得一试。

Answer 2

正如Brbcoding所评论的那样，你应该看一下fittext库。我之前使用它，它很棒，试一试;）。

Answer 3

这个jQuery函数用于调整响应式网页布局中的文本大小，不知道它是否是您正在寻找的内容。

$(document).ready(function(){
function scale_text(body, scaleFactor, maxScale, minScale) {
    var scaleSource = body.width();

    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 + '%');
    }

function window_resize() {
    scale_text($('#intromsg'), 1, 500, 150); // example re sizing element
     scale_text($('#introsub'), 5, 150, 100); // example re sizing element

    }


$(window).resize(function () {
    window_resize();
});

//Fire it when the page first loads:
window_resize();

}）;

在Div / iframe中缩放文本大小

3 个答案: