0

ブラウザのサイズ変更をfont-size 動的に変更する方法はありcssますか?

メディアクエリで設定されたブレークポイントがあります。最初のブレークポイントでのフォントサイズは、たとえば1emです。もう一方のブレークポイントでは、テキストがに拡大され2emます。

フォントのサイズ変更は、ブレークポイントでのみ発生します。コインテイナーの幅をパーセンテージに設定したときに達成される効果を探しています(ブラウザーのサイズを変更すると自動的にサイズが変更されます)。

javascriptを使用せずに、テキストを1つのブレークポイントから別のブレークポイントに動的に拡大する方法はありますか?

4

2 に答える 2

0

ウィンドウサイズに応じてフォントサイズonresizeを変更する場合は、javascriptハンドラーをウィンドウサイズ変更イベントにバインドする必要があります。2つの状態間でアニメーション化するだけの場合は、CSS3アニメーションを使用できます。f.ex:

-webkit-transition:font-size 1s ease-out;

http://jsbin.com/uyitut/1

この例では、遷移をデモするためだけにトリガーのボタンを使用していますが、代わりに複数のメディアクエリを追加できます。これは100pxあたり1mqのかなり厄介な例です:http://jsbin.com/uyitut/5です、それはちょっとうまくいきます。

于 2013-01-14T00:11:47.553 に答える
0

これは達成できます。CSSトランジションとメディアクエリのデモとトランジションの追加の記事を参照してください。

于 2013-01-14T00:59:27.273 に答える