5

フォント サイズをコンテナー サイズのパーセンテージに設定することは可能ですか? 画像、ヘッダー、説明を含むアイテムのリストがあります。ユーザーがウィンドウのサイズを変更すると、画像のサイズも自動的に変更されます。ヘッダーのフォントも同じにしたいと思います。

編集: Javascript/JQuery は問題ありません。

4

5 に答える 5

11

CSS3にはvw、ビューポート幅の1/100を表す単位があります。例えば、

h1 { font-size: 5.5vw; }

見出しのフォントサイズをビューポート幅の5.5％に設定します。

ただし、これはIE 9（標準モード）でのみ機能するようです。さらに、IE 9は、ブラウザウィンドウのサイズが変更されたときにユニットの値を動的に変更せず、リロード時にのみ変更します。

于 2012-07-16T21:16:10.333 に答える
5

タイラーの答えを拡張するために、これはjavascriptの意味ですが、CSS3ビューポートを使用して同じ偉業を達成できると確信していますが、jQueryを使用する方が良いでしょう（通常、ほとんどのブラウザーのキャッシュにあり、常にホストされていますグーグルで心配する必要はありません:)

このようなCSSがある場合：

#body #mytext {
   font-size: 50%;
}

次のようにjQueryで動的にサイズを変更できます。

$(window).resize(function(){
    $('#body #mytext').css('font-size',($(window).width()*0.5)+'px');
});
于 2012-07-16T21:16:06.700 に答える
3

いいえ、これは JavaScript でのみ実行できます。

于 2012-07-16T20:34:32.727 に答える
1

jqueryはオプションですか？

もしそうなら超簡単：フィドル

<div id="container">
    <p>HELLO WORLD!</p>
</div>​


<script>
$(document).ready(function() {
    var sizeMe = ($('#container').height() / 100) * 90; /* 90% of container */
    $('p').css('font-size', sizeMe);
};
</script>
于 2012-07-16T20:54:11.817 に答える
-1

私は過去にjqueryでそれをやったことがあります。少しでも興味があれば、この記事をチェックしてください。CSS を使用してデバイスの幅を検出することもできます (ブラウザーではなく、古いブラウザーではサポートされていません)。

http://css-tricks.com/resolution-specific-stylesheets/

于 2012-07-16T20:48:48.263 に答える