15

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

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

何か案は？

4

9 に答える 9

34

私はこれを自分でしなければなりませんでした。私がしたことは、本文の基本テキストサイズと、他のすべてのサイズのパーセンテージを設定することでした。次に、単純なjQueryスクリプトを使用して、ウィンドウサイズ変更の基本サイズを変更しました。その後、他のサイズも更新されます。

私はこのようなものを使用しました：

$(function() {
    $(window).bind('resize', function()
    {
        resizeMe();
        }).trigger('resize');
    });

そしてresizeMe-functionで、私はこれを持っていました：

//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);
于 2010-06-07T13:38:23.927 に答える
7

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

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

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

于 2010-06-08T08:53:51.997 に答える
3

http://practicaltypography.com/end-credits.html#bio M. Butterickのトリックを使用しています。

    <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>
于 2013-08-03T14:32:47.043 に答える
0

リザンの答えは完璧です！-1 はそのままにしておきます。私がそれを取り除いたとき、子猫はいたるところで死にかけていました。

fontsize 変数の代わりに、ページの標準フォントサイズに設定してください。私のは16歳でした。

于 2013-05-18T00:08:10.097 に答える