13

私はいくつかのWebアプリを実行していますが、font-sizeに問題があります。CSS3またはjavascriptでウィンドウの変更サイズに比例してフォントサイズを変更する方法は?

4

5 に答える 5

29

これを行う理想的な方法は、単位を使用することです。これは、ビューポート幅vwの 1/100 として定義されます(名前の由来)。たとえば、テキストを常にブラウザーの幅の 4.5% にしたい場合は、次のサイズを使用できます。

font-size: 4.5vw;

…そして理論的には、それはうまくいくはずです。残念ながら、期待どおりに動作しないことがわかります。WebKit ブラウザーには (少なくとも) フォント サイズの値がライブ更新されないバグがあります (ただし、他のすべてのサイズではそうです)。フォント サイズを変更するには、再描画をトリガーする必要があります。これはz-index、JavaScript からプロパティを更新することで実行できます。

window.addEventListener('resize', function(){
    document.getElementById('myEl').style.zIndex = '1';
}, false);

これにより、少し途切れが生じる場合がありますが、JavaScript で実際のサイズを計算する必要がなく、メディア クエリのように「段階的な」サイズを使用する必要がないことを意味します。

于 2013-05-05T17:02:58.423 に答える
10

そのための理想的な方法は、VW の font-size クエリと @media クエリを組み合わせることです。理由は次のとおりです。

1) em 自体は、ウィンドウ サイズによって再スケーリングされません。

2) vm 自体は、解像度が 800px 未満の画面では小さすぎます。

したがって、これを達成する正しい方法は次のとおりです。

  • クラスを定義します - 必要な画面幅の VM=1.0 で prop-text
  • メディア クエリを追加して、必要な低解像度グリッドのフォント サイズに合わせます。

私のレスポンシブ グリッド (1/2 列を 768px 幅未満の 100% 幅にするように設定) では、次のようになります。

<style>
    .prop-text{font-size:1.0vw}
    @media (max-width : 768px) {
    .prop-text{font-size:2.0vw}
    }
    /*other media queries here - fit font size to smartphone resolutions */
</style>

<div class="prop-text">your text is here</div>
于 2014-09-11T06:08:50.347 に答える
7

body基本フォント サイズ ( css で要素に対して定義したもの) をpx設定し、ページの残りの部分のどこでも、em単位を使用してそのフォントに相対的なフォント サイズを設定すると、メディア クエリを使用してすべてのページのフォント サイズを変更できます。ベースフォントを変更するだけで、次のようになります。

body {
  font-size: 15px;
}
@media (max-width: 1000px) {
  body { font-size: 1.3em; }
}
@media (max-width: 500px) {
  body { font-size: 1.1; }
}
于 2013-05-05T14:39:00.187 に答える