1

CSSを使用してコンテナのサイズに基づいてフォントサイズを動的に設定する方法はありますか？現時点では、この動作を実現するために次のJSコードを使用しています。

var cubeText = function() {
    var fontSize = parseInt($(".cube.avatar").width());
    fontSizeBig = fontSize/3.5
    fontSizeSmall = fontSize/6;
    console.log(fontSize);
    $(".cube span.big").css('font-size', fontSizeBig);
    $(".cube span.small").css('font-size', fontSizeSmall);
}

これには1つの大きな欠点があります。テストがポップインし、ページがロードされた後にサイズが変更されるため、非常に不快な「プロッピング」効果が発生します。

4

2 に答える 2

2

CSS3ユニットをチェックしてくださいvw。

他のブラウザをサポートする必要がある場合は、JavaScriptが唯一の方法です。

于 2012-11-30T00:10:50.983 に答える
1

CSSでは不可能であるか、多くのブラウザでサポートされていません。ビューポートの相対的な長さを確認できますが、どこでも機能しません...

プロップ効果には、たとえば背景と同じ色のコンテンツや透明度などを使用できます。デモ

​$(document).ready(function(){
   changeFontSize();
    });

function changeFontSize(){
    var fontSize = parseInt($(".cube").width());
    var fontSizeBig = fontSize/10;
    var fontSizeSmall = fontSize/20;
    console.log(fontSize);
    $(".big").css('font-size', fontSizeBig);
    $(".small").css('font-size', fontSizeSmall);
    $(".cube").css('color','#000');
}

次のような素敵なjsプラグインを使用することもできます：http：//fittextjs.com/

于 2012-11-30T00:37:33.550 に答える