CSS、相対フォントサイズ

フォントサイズをコンテナサイズのパーセンテージに設定することはできますか？私はイメージ、ヘッダー、および説明を持つアイテムのリストを持っています。ユーザーがウィンドウのサイズを変更すると、イメージのサイズが自動的に変更されます。ヘッダーフォントを同じようにしたいと思います。CSS、相対フォントサイズ

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

出典

2012-07-16 Scott Beeson

コンテナのサイズは、パディング、境界線、またはパディング、ボーダー、マージンを含むパディングを含むことを意味しますか？ –

また、IMO、私はあなたのビューポート/ウィンドウのサイズに基づいてフォントサイズのサイズを変更することをお勧めします。主に読みやすさを妨げます。 –

コンテナ、ウィンドウ、パディング、何でも。私はちょうどウィンドウとレイアウトがサイズ変更されたときに変更される他のものと比較して自動的にサイズを変更できるようにしたいと思っています... –

ただ、タイラーの答えに拡大するため、私はあなたがCSS3のビューポートを使用して、同じ偉業を達成することができます少し確信しているものの、これは、ジャバスクリプトがために意味されるものである、あなたはjQueryのを使用したほうが良いでしょう（それは常に最もブラウザのとのキャッシュには通常、Googleでホストされているだあなたは、このようなCSS持っている場合:)

を心配するので、必要はありません：
をあなたが動的にこのようにjQueryでサイズを変更することができます
#body #mytext { font-size: 50%; }

：CSS3で

$(window).resize(function(){ $('#body #mytext').css('font-size',($(window).width()*0.5)+'px'); });

出典

2012-07-16 21:16:06

具体的な値を増やそうとしない限り、 '＃mytext'が'＃body'の子孫であることを指定する必要はありません（idを使用している場合は間違った方法です）。 –

これはシナリオによって異なりますが、このようにCSSを使用する場合は何も問題ありません。しかし、それは単なるデモです... –

シンタックスのように間違っています。セマンティクスのように間違っている、はい。 –

いいえ、これはJavaScriptでのみ行うことができます。

出典

2012-07-16 20:34:32

Tylerと同様に、フォントは現在のブラウザのフォントサイズあなたが "em"や "％"のような動的なフォントサイズを使用している場合。あなたは、タグの高さ/幅に応じてサイズを取得する場合は、JavaScriptを使用してフォントサイズを計算する必要があります – r3bel

-1

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

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

出典

2012-07-16 20:48:48 TurboSupra

jQueryのオプションですか？

超簡単それがある場合：fiddle

<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-16 20:54:11 Turnip

理論的に変更する必要がある他の多くの属性（テキストのインデントや線の高さなど）があります。 –

しかし、再び、OPはそれについて尋ねなかった。 :) –

これはjsfiddleでも、私のためには機能しません。？ –

、ビューポートの幅の1/100の略vwユニットは、そこにあります。たとえば、

h1 { font-size: 5.5vw; }

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

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

出典

2012-07-16 21:16:10

これは相対的なコンテナのサイズではありません。 –

これは同じ効果をもたらしますが、JavaScriptかCSSを変更しても、コンテナのサイズが変更されても、正しく動作しません。コンテナのサイズを変更すると、これを更新することを忘れないでください。 –

CSS、相対フォントサイズ

答えて

関連する問題