画面の解像度に基づいてフォント サイズを動的に調整する方法

ユーザーの画面解像度に対する相対的なフォント サイズ

流動的な Web サイト上の要素に適切なフォント サイズを決定することは、特にさまざまなフォント サイズを考慮する場合に困難になることがあります。画面の解像度。目標は、折り返さずにメニューのフォント サイズがコンテナの幅に合わせて動的に調整されるようにすることです。

ビューポート ベースのディメンション

最新の CSS は、相対的なディメンション ベースを提供します。デバイスのビューポート上。これらの寸法により、ユーザーの画面解像度に応じてフォント サイズを正確に変更できます。

• vw: ビューポートの幅のパーセンテージ
• vh:ビューポートの高さのパーセンテージ
• vmin: vw または vh の小さい値
• vmax: vw または vh の大きい値

例:

<code class="css">body {
    font-size: 3.2vw;
}</code>

これにより、フォント サイズがビューポートの幅の 3.2% に設定され、さまざまな画面解像度に合わせて適切に拡大縮小されます。

従来の方法

古いアプローチには以下が含まれます:

メディア クエリ

• 複数のブレークポイントのフォント サイズを指定する必要があります:

<code class="css">@media (min-width: 768px) {
    body {
        font-size: 17px;
    }
}</code>

パーセンテージ (%) または "Root Ems" (rem)

• すべての要素を拡大縮小するには、基本フォント サイズ (例: body) を変更します。

<code class="css">body {
    font-size: 62.5%;
}

h1 {
    font-size: 1.5rem;
}</code>

• レムはルート フォント サイズに相対し、パーセンテージは現在の要素のサイズに相対します。

以上が画面の解像度に基づいてフォント サイズを動的に調整する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。