デモをお試しください
サイトをプレビューするには、[アプリを表示] を押します。[ 全画面表示 。
サイズの異なるブラウザ ウィンドウでアプリを再読み込みして、ブラウザの読み込みを確認する ブラウザサイズごとに異なるレイアウトを使用できます。
コードを表示する
- これを機能させるコードについては、
index.html
をチェックアウトしてください。
<img src="flower.jpg"
srcset="flower-small.jpg 480w, flower-large.jpg 800w"
sizes="(max-width: 480px) 100vw, (max-width: 1024px) 50vw, 800px">
一体、どういうことでしょうか。
sizes
属性の値により、画像の表示幅は次のようになります。
「ビューポートの幅の 100%」幅 480 ピクセル以下のビューポート(ビューポートの 50%
幅」幅広の画面では 481 ~ 1,024 ピクセル、1,024 ピクセルを超える画面では 800 ピクセルです。これらの
幅が CSS で指定された幅と一致している。
複数のスロット幅を指定できるため、 ビューポートのサイズごとに異なるスタイル(画像の幅)を設定できます。
複数のスロット幅を指定する方法
- 複数のスロットの幅を指定するには、カンマ区切りのリストを使用します。各リスト項目は
メディア条件(例:
max-width
、min-width
など)とスロット幅があります。 - このリストの最後のアイテムが、デフォルトのスロット幅です。デフォルトで設定されているので、 メディア条件を指定する必要はありません。
- リストできるスロットの幅は、
srcset
は関係ありません。 スロットの幅はさまざまな単位で指定できます。以下はすべて 有効な幅:
100px
33vw
20em
calc(50vw-10px)
以下は有効な幅ではありません。
25%
(サイズ [size] 属性ではパーセンテージを使用できません)