メディアクエリを超えて：レスポンシブデザインに新しいHTML＆CSS機能を使用する

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

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

本当に応答性の高い画像： width: 100%

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

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

<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/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174358939320557.png?x-oss-process=image/resize,p_40" class="lazy" alt="メディアクエリを超えて：レスポンシブデザインに新しいHTML＆CSS機能を使用する">
</source></source></source></picture>

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

<img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174358939433455.png?x-oss-process=image/resize,p_40" 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）{
  / *高解像度の画面のスタイル */
}

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

例：

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

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

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

CSS関数： min() 、 max() 、およびclamp()

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

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

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

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

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

   。箱 {
    font-size：clamp（1rem、40px、4rem）; / *範囲内のフォントサイズ */
  }

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

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

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

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

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

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

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