web-dev-qa-db-ja.com

ウィンドウのサイズを変更するときにテキスト（フォントサイズ）のサイズを自動変更しますか？

ウィンドウサイズを変更すると要素のサイズが変更されるページを作成しようとしていますが（無駄です）。私はそれを画像のcssで問題なく機能させていますが、テキストに対して同じことを達成することができないようで、CSSでそれが可能かどうかさえわかりません。そして、私はこれを実現するjqueryスクリプトを見つけることができないようです。

ユーザーがウィンドウのサイズを変更するときは、ユーザーがページズームを呼び出さなくても、基本的にページを動的かつ流動的にスケーリングする必要があります。これはcssを介してimg divで正常に機能しますが、同じサイズのままのテキストでは機能しません。

何か案は？

jquerycsstextresizefluid-layout
14
Stephen

私はこれを自分でしなければなりませんでした。私がしたことは、本文のベーステキストサイズを設定し、他のすべてのサイズのパーセンテージを設定することです。次に、単純な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);
34
Lizzan

FitText のようなjQueryプラグインを試してください。親要素の幅に合わせてテキストを自動的にサイズ変更します。

同じ目標を持つ別のjQueryプラグインは BigText （ demo ）です。

12
Ryan McGeary

CSS3メディアクエリ でこれを行うことができ、ブラウザーのサイズに応じて異なる基本フォントサイズを指定します。 A List Apart にこれについての良い記事があります

IEサポートの場合、 CSS式を使用してハッキングできる可能性があります

これには、たとえばbodyタグで固定の基本フォントサイズを使用し、他の場所ではパーセントまたはemベースのサイズを使用する必要があります。

7
roryf

リザンの答えに基づいて、これは幅と高さの両方の平方根を使用したバージョンです比例したサイズを取得します。

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

4
Tom Söderlund

roryfは正しい軌道に乗っています！

メディアクエリが答えの1つです。

ここでの秘訣は、本文から始まるすべての場所でフォントサイズに％を使用することです。このようにして、フォントサイズが継承され、本文で変更すると、どこでもフォントサイズが変更されます。

次のようなものを試してください：

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

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

Webサイトの幅が600px未満になると、フォントサイズは、どこにいても70％になり、％が使用されます（この例でもh1）。

3
Martin Sookael

私は http://practicaltypography.com/end-credits.html#bio のトリックを使用しています。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>
3
Peter Forster

サイズ変更可能なテキストをより簡単にすることができます。この解決策は私にとってはうまくいきます。 http://jsfiddle.net/VooDi/dka48dx8/

Body set font-sizeの場合、現在のウィンドウの内側の幅に相当します。

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>

それで全部です。これが誰かを助けることを願っています。

0
G.F.

リザンズの答えは完璧です！ -1のままにしておきます！私がそれを削除したとき、子猫は至る所で死んでいました。

Fontsize変数の代わりに、ページの標準フォントサイズに設定するだけです。私は16歳でした。

0
Ultroman the Tacoman