多个设备的图像响应能力？

Question

这是我的HTML代码：

<picture>
<source srcset="480_smaller_landscape.jpg" media="(max-width: 480px) and (orientation: landscape)">
<source srcset="776_smaller_portrait.jpg" media="(max-width: 776px) and (orientation: portrait)">
<source srcset="1080_default_landscape.jpg" media="(min-width: 1080px) and (orientation: landscape)">
<source srcset="1926_default_portrait.jpg" media="(min-width: 1926px) and (orientation: portrait)">
<img srcset="default_landscape.jpg" alt="My default image">
</picture>

我的问题是： 如果我使用此代码响应多个设备的图像..

一次发出多少请求？对于所有图像或仅针对特定设备所需的图像......

示例：如果我为平板电脑（776px）加载此图片页面，则只会加载“776_smaller_portrait.jpg”。

OR

所有图片将立即加载，但仅显示“776_smaller_portrait.jpg”

我想做什么：

我想为特定设备显示特定图像，图像将像

一样内嵌

<img srcset="file_path/device_resulation_image_name.jpg" alt="My default image">

Answer 1

这很容易通过简单地打开开发人员工具进行测试，并在加载页面时在“网络”选项卡上进行设置。

＆＃13;

＆＃13;

<picture>
<source srcset="480_smaller_landscape.jpg" media="(max-width: 480px) and (orientation: landscape)">
<source srcset="776_smaller_portrait.jpg" media="(max-width: 776px) and (orientation: portrait)">
<source srcset="1080_default_landscape.jpg" media="(min-width: 1080px) and (orientation: landscape)">
<source srcset="1926_default_portrait.jpg" media="(min-width: 1926px) and (orientation: portrait)">
<img srcset="default_landscape.jpg" alt="My default image">
</picture>

＆＃13;

＆＃13;

＆＃13;

但是，更好的方法是使用CSS媒体查询，这样您的HTML就不会被风格内容弄得乱七八糟。在这种情况下，您有一个元素（可能是div）并使用媒体查询有条件地为元素设置background:url()属性。这是一个简单的例子。运行此代码段并将浏览器的大小调整为大小，然后再重新调整。

＆＃13;

＆＃13;

#responsive { background-size:contain; }

@media screen and (max-width:800px) {
  #responsive {
    background-image: url("https://free.clipartof.com/10-Free-Smiley-Face-With-Black-Eye.jpg");
  }
}

@media screen and (min-width:801px) {
  #responsive {
    background-image:url("https://static-s.aa-cdn.net/img/ios/736026129/e17c5fe0e78bd561ba719c2a38ad85b6?v=1");
  }
}

＆＃13;

<div id="responsive"></div>

＆＃13;

＆＃13;

＆＃13;