0

テキストに単位を使用emしていますが、機能していないようです。巨大な幅の画面解像度では、テキストは画面を埋めるのに十分な幅/大きさではなく、小さな画面解像度では折り返されます。どうすればこれを制御できますか?

基本的に、実際のウィンドウ サイズに基づいてテキストのサイズを制御できればいいのですが。そのため、ウィンドウのサイズが上下に変更された場合、テキストはそれに対応し、レイアウトは常に (すべてのブラウザー画面幅で) 同じように表示されます。

これどうやってするの？jQueryのサイズ変更イベントで遊んでいますが、自分の目的にどのように使用できるかわかりません。多分誰かが私をここで正しい方向に始めさせることができますか?

以下は、これを行う jsFiddle の例です: http://jsfiddle.net/vqbCL/2/

しかし、それはテーブル要素の場合であり、テーブル要素は使用していません。流動的なレイアウトを試みています。そのため、ページ上のすべての要素のフォント サイズにその手法を組み込むことができればいいと思います。

これを行うための弱い試みで私が使用しているコードは次のとおりです。

jQuery(document).ready(function($){
    $(window).bind("resize", function(){
        var containerSize  = $("body").width(),
            bodyFontSize = $("body").css("font-size");
            textPercentage = parseInt(bodyFontSize.substring(0, bodyFontSize.length - 2)) / $("body").width(),
            textRatio      = containerSize * textPercentage,
            textEms        = textRatio / parseInt(bodyFontSize.substring(0, bodyFontSize.length - 2));
            alert("Text Percentage = " + textPercentage + "\nTextRatio = " + textRatio + "\nNew EM font-size = " + textEms);

        $('body').css('fontSize', textEms+'em');
    }).trigger("resize");
});

ここで起こっていることは次のとおりです。

containerSize = 974 (might be different for you depending on your browser width).
bodyFontSize = 16px
textPercentage = 16/974 = 0.01642710472279261
textRatio = 974 * 0.01642710472279261 = 16
textEm = 16 / 16 = 1em;

適切な textRatio を取得し、そこから適切な textEm を取得する方法を決定する必要があります。

* 上記の最新コードに更新 *

ここでこれを実装しようとしているのを見ることができます: http://dream-portal.net/Test/index.html

基本的に、Text Ratio (16 ピクセル) と EM Font-Size は常に 1em (常に同じ) ですが、ここで変更されるのはText Percentageウィンドウのサイズ変更だけです。しかし、font-size は常に 1em で、Text Ratio は常に = 16 (body.css("font-size")値である 16 ピクセルのように) です。これを計算する式のどこかに何らかの欠陥があるに違いありません。

4

0 に答える 0