2

私は、ページの 1 つが本であるサイトをまとめています。

背景としてページ用紙を持つコンテンツ div があります。この中に、テキストのさまざまなページを表示するための iframe があります。div の幅と高さを % に設定しましたが、テキスト サイズに問題があります。本の性質上、コンテンツは非常に静的でなければなりませんが、同時に画面サイズに合わせて拡大縮小する必要があります。

jQueryをいじってみましたが、うまくいきませんでした。jQueryを使用してテキストをスケーリングする方法、または本を表示する方法についてより良いアイデアを誰かが持っているかどうかについてのヒントをいただければ幸いです。

4

3 に答える 3

1

これが jQuery ソリューションではないことはわかっていますが、CSS メディア クエリの使用について考えたことはありますか?

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%; }
}

これにより、現在の幅に応じてフォントサイズが変更され、解像度が小さい場合は小さくなります。500px未満？80%。800 から 501 ピクセルの間ですか? 90%。それ以外の場合は、標準の 100% です。

これが s で機能するかどうかはわかりませんiframeが、試してみる価値はあります。

于 2013-03-08T14:59:14.450 に答える
0

レスポンシブ Web レイアウトでテキストのサイズを変更するために持っていたこの 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();

});

于 2013-03-08T17:50:59.000 に答える
0

Brbcoding がコメントしているように、fittextライブラリを確認する必要があります。私は以前にそれを使用したことがあり、それは素晴らしいです、試してみてください;)。

于 2013-03-08T15:00:15.500 に答える