いわゆるレスポンシブデザインとは、画面解像度、画素密度比、幅が異なる端末機器においてもWebページのレイアウトを適応的に調整できることを意味します。レスポンシブ デザインの本来の目的は、元の PC ウェブサイトをモバイル端末と互換性のあるものにすることです。ほとんどのレスポンシブ Web ページは、メディア クエリとさまざまなスタイルの CSS ファイルの読み込みを通じて実装されます。このような柔軟なレイアウトにより、さまざまなデバイス端末上で Web サイトのレイアウトがより合理的になります。
レスポンシブデザインには多くの利点がありますが、多くの欠点もあります。 PCとモバイル端末は同じWebサイトにアクセスするため、PCはトラフィック制限を気にする必要はありませんが、モバイル端末はトラフィック制限を無視できません。
さまざまな端末モデルの画面幅とピクセル密度に適応させるために、通常は次の方法を使用して画像の CSS スタイルを設定します。
<style> img{ max-width:100%; height:auto;画像の最大幅を 100% に設定して、画像が親要素の幅を超えないようにします。height:auto を使用すると、画像の幅も変更されます。画像の幅が変化すると、画像の高さは独自の幅と高さの比率に従って拡大縮小されます。
このように、モバイル デバイスでレスポンシブ Web ページの画像にアクセスすると、画像の解像度のみが拡大され、大きな画像が PC にダウンロードされます。これにより、トラフィックと帯域幅が無駄になるだけでなく、Web ページの速度も低下します。開く速度はユーザーエクスペリエンスに重大な影響を与えます。
新しいソリューション: <写真>次のチェストナットでは、画面幅ごとに異なる画像がロードされます。ページ幅が 320px から 640px までの場合は minpic.png がロードされ、ページ幅が 640px を超える場合は middle.png がロードされます。
<picture> <ソースメディア=(最小幅: 320px) および (最大幅: 640px) srcset=img/minpic.png> <ソースメディア=(最小幅: 640px) srcset=img/middle.png> < img src=img/picture.png <source media=(min-width: 320px) および(最大幅: 640px) および (方向: 横向き) srcset=img/minpic_landscape.png> <source media=(最小幅: 320px) および (最大幅: 640px) および (方向: 縦向き) srcset=img/ minpic_portrait.png> <source media=(min-width: 640px) および(方向: 風景) srcset=img/middlepic_landscape.png> <ソース メディア=(min-width: 640px) および (方向: 縦) srcset=img/middlepic_portrait.png> <img src=img/picture.png <ソース メディア=(最小幅: 320px) および (最大幅: 640px) srcset=img/minpic.png,img/minpic_retina.png 2x> <source media=(min-width: 640px) srcset=img/middle.png,img/middle_retina.png 2x> <img src=img/picture.png ,img/picture_retina.png 2x <source type=image/webp srcset=img/picture.webp> <img src=img/picture.png サイズ=90vw srcset=picture-160.png 160w、picture-320.png 320w、picture-640.png 640w、picture-1280.png 1280w>
6. 次の例では、ウィンドウの幅が 800px 以上の場合に、size 属性を追加して、対応するバージョンの画像を読み込みます。
<source media=(min-width: 800px)size=90vw srcset=picture-landscape-640.png 640w、picture-landscape-1280.png 1280w、picture-landscape-2560.png 2560w><img src=picture-160 .png サイズ=90vw srcset=picture-160.png 160w、picture-320.png 320w、picture-640.png 640w、picture-1280.png 1280w>
互換性:
現在、Chrome、Firefox、および Opera のみがこれと良好な互換性を持っています。具体的な互換性は次の図に示すとおりです。
アドバンテージ：上記のサンプル コードからわかるように、js やサードパーティ ライブラリを導入したり、CSS にメディア クエリを含めたりせずに、<picture> 要素は HTML のみを使用してレスポンシブ画像を宣言できます。
<source> 要素<picture> タグ自体には属性はありません。魔法の部分は、<picture> が <source> のコンテナとして使用されることです。
ビデオやオーディオなどのマルチメディアをロードするために使用される <source> 要素が画像をロードするように更新され、いくつかの新しい属性が追加されました。
srcset (必須)単一の画像ファイル パス (例: srcset=img/minpic.png) を受け入れます。
または、ピクセル密度によって記述されたカンマ区切りの画像パスです (例: srcset=img/minpic.png、img/minpic_retina.png 2x)。1x の記述はデフォルトでは使用されません。
メディア (オプション)CSS @media セレクターでわかるように、検証されたメディア クエリを受け入れます (例: media=(min-width: 320px))。
これは、前の <picture> 構文の例で使用されています。
サイズ (オプション)単一の幅の説明 (例:size=100vw) または単一のメディアクエリの幅の説明 (例:size=(min-width: 320px) 100vw) を受け取ります。
または、カンマ区切りのメディア クエリ幅の説明 (例:size=(min-width: 320px) 100vw、(min-width: 640px) 50vw、calc(33vw - 100px)) 最後のものがデフォルトとして使用されます。
タイプ(オプション)サポートされている MIME タイプを受け入れます (例: type=image/webp または type=image/vnd.ms-photo)
ブラウザは、これらのヒントと属性に基づいて正確な画像リソースを読み込みます。タグのリスト順に従います。ブラウザは最初の適切な <source> 要素を使用し、後続の <source> タグを無視します。
最後の <img> 要素を追加します<img> 要素は、ブラウザがサポートしていない場合、または一致するソース タグがない場合に表示される <picture> 内で使用されます。 <picture>内に<img>タグを使用する必要があります。これを忘れると画像が表示されません。
<img> を使用して、デフォルトの画像表示を宣言します。 <img> タグを <picture> の最後に配置すると、ブラウザは <img> タグを見つける前に <source> 宣言を無視します。このイメージ タグには、alt 属性を記述する必要もあります。
この記事は他の記事を参考にしていますので、画像の紹介はここで終わりです。
以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。