レスポンシブWebデザインは、メディアクエリやFlexBoxやグリッドなどの最新のCSSレイアウトを超えています。この記事では、より自然で効率的なアプローチのためにメディアクエリへの依存を最小限に抑え、真に応答性の高いWebサイトを作成するための、よく見過ごされているHTMLおよびCSS技術(shù)を探ります。

メディアクエリは、これらの高度な機能と組み合わせて使用??すると補足的になります。その方法を探りましょう。

本當(dāng)に応答性の高い畫像： width: 100%

width: 100%畫像のサイズ変更を簡素化するが、畫像の歪みと小さなデバイスでの不要な大規(guī)模なダウンロードという欠點がある。畫像の解像度とサイズを最適化することは、パフォーマンスにとって重要です。高解像度の畫像は、より大きな畫面に、低解像度のバージョンには小さな畫面に提供する必要があります。

<picture></picture>要素は、メディアクエリに基づいて正確な畫像リソース選択を提供します。単一の大きな畫像をスケーリングする代わりに、さまざまなシナリオに対して複數(shù)の畫像バージョンを指定します。

<picture>
  <source media="(min-width: 1000px)" srcset="picture.png">
  <source media="(min-width: 601px)" srcset="picture-lg.png">
  <source media="(min-width: 401px)" srcset="picture-sm.png">
  <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174358939320557.png" class="lazy" alt="メディアクエリを超えて：レスポンシブデザインに新しいHTML＆CSS機能を使用する">
</source></source></source></picture>

この例ではpicture-sm.pngフォールバックとして使用しています。メディアクエリは、特定のビューポート幅をターゲットにし、適切な畫像を選択します。また、さらに最適化するために、 srcset屬性に畫像密度（1x、2x、3x）を組み込むこともできます。

<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174358939433455.png" class="lazy" alt="メディアクエリを超えて：レスポンシブデザインに新しいHTML＆CSS機能を使用する"> <h3 id="Device-Resolution-Based-Styling-with-CSS-Media-Queries">Device Resolution-Based Styling with CSS Media Queries</h3> CSSメディアクエリは、ビューポートサイズだけでなく、畫面解像度（DPI）をターゲットにできます。

 @mediaのみの畫面と（最小解像度：192dpi）{
  / *高解像度の畫面のスタイル */
}

これにより、高品質(zhì)の畫面に高品質(zhì)の畫像を提供できます。ただし、解像度のみに依存すると、小さな畫面に大きな畫像が提供される場合があるため、ビューポートサイズのチェックと組み合わせることをお勧めします。

例：

體 {
  背景畫像：url（picture-md.png）; / *デフォルト畫像 */
}

@mediaのみの畫面と（最小解像度：192dpi）{
  體 {
    背景畫像：url（picture-lg.png）; / *高解像度畫像 */
    オブジェクトフィット：カバー;
    オブジェクトポジション：100％150％; / *焦點を調(diào)整 */
  }
}

object-fitおよびobject-positionプロパティは、畫像のトリミングと焦點を細かく制御します。

CSS関數(shù)： min() 、 max() 、およびclamp()

• min() ：要素の最小サイズを設(shè)定します。テキストが判読できなくなるのを防ぐのに役立ちます：

   html {
    font-size：min（1rem、22px）; / * 16pxから22pxの間のフォントサイズ */
  }

• max() ：要素の最大サイズを設(shè)定します。

   。箱 {
    幅：最大（60％、600px）; / *最大60％または600pxの幅 */
  }

• clamp() ： min()とmax()を組み合わせて、最小、優(yōu)先、最大値を提供します。

   。箱 {
    font-size：clamp（1rem、40px、4rem）; / *範(fàn)囲內(nèi)のフォントサイズ */
  }

レスポンシブユニット：ピクセルを超えて

レスポンシブデザインは、相対ユニットからのメリットがあります：

• vw / vh ：ビューポート幅 /高さ。
• rem ：ルート要素のフォントサイズに対して。
• em ：親要素のフォントサイズに比べて。
• % ：親要素のサイズに比べて。

remユニットは、ブラウザフォントサイズが変更され、一貫したスケーリングを提供します。 emユニットは、親要素のサイズに基づいてより詳細な制御を提供します。 vwとvh 、ビューポートの寸法に直接結(jié)び付けられています。

メディアクエリを超えて移動：全體的なアプローチ

これらのHTMLおよびCSS機能は、メディアクエリを置き換えるのではなく、補完する応答性に対する制御を強化します。彼らは、さまざまなデバイスと畫面サイズのユーザーエクスペリエンスをより細かく制御します。これらの手法を活用することにより、開発者はより堅牢で効率的なレスポンシブデザインを作成できます。

以上がメディアクエリを超えて：レスポンシブデザインに新しいHTML＆CSS機能を使用するの詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。