12 列のレイアウトのサイトがあり、デザインに合わせて srcset 属性と size 属性を正しく使用する方法を見つけようとしています。
デスクトップでは 3 列にまたがるサイドボックスがありますが、タブレットとモバイルのサイズでは 12 列 (100% 幅) になります。
私が欲しいのは、デスクトップ バージョンで使用される画像、モバイルでも使用される (最大幅 480px)、および特定のタブレット サイズの画像が 481px から 781px の間のすべてで使用されることです。
これは私のコードです:
<img
src="http://placehold.it/370x150/cecece"
srcset="http://placehold.it/768x311/f67f57 768w, http://placehold.it/370x150/cecece 320w"
sizes="(max-width: 768px) 100vw, (max-width: 480px) 100vw"
>
私の例では、780px までは常に 768 バージョンが使用され、その後はデフォルトの src が使用されます。しかし、320 バージョンを 480px まで使用するにはどうすればよいですか?