使用hidden-xs和visible-xs

Question

这是我遇到的问题，我想知道任何其他有效的解决方法。最近我开发了一个电子商务网站。这个网站是一个反复的网站。

1. 桌面视图的隐藏xs，移动视图的visible-xs。
2. 这是因为有时候桌面视图中的样式看起来很好，但在移动视图中却不是用户友好的。
3. 例如，图像/ div在桌面视图中完美显示，当涉及到移动视图时，它可能会变得过大。我没有必要修改图像尺寸，因为图像已经切割成相同的尺寸。
4. 为了控制这一点，我使用hidden-xs和visible来为桌面和移动视图创建两个div。

我做了什么：

1. 我尝试将图像切割成两种尺寸，分别是手机和桌面。当网站检测到它处于移动视图中时，它将重新加载并显示移动视图图像。这种方法让我在上传时剪切图像。
2. Hidden-xs和visible-xs

问题：

1. 在移动视图和桌面视图中加载相同图片是否有任何可能的方法，而不会切割2尺寸的图片并创建2个div？
2. 创建2 div需要花费时间加载，并且预加载两个div图像虽然花费的时间较短。

感谢。

Answer 1

这就是我得到的。但这种方法还需要两个图像。但是不需要在两个div中预加载两个图像。

1. 使用php检测浏览器大小/设备。
2. 如果桌面大小，则显示桌面视图图像。
3. 如果手机中的尺寸显示移动视图图片。

Answer 2

这是在不使用两个div的情况下显示不同图像的一种方法。浏览器仅加载适合于media-attribute中确定的屏幕大小的图像。在整页中打开代码段并减小浏览器窗口的大小以查看结果。

＆＃13;

＆＃13;

<picture>
  <source media="(min-width: 487px)" srcset="http://via.placeholder.com/350x150">
  <source media="(max-width: 486px)" srcset="http://via.placeholder.com/150x150">
  <img src="http://via.placeholder.com/350x150" style="width:auto;">
</picture>

＆＃13;

＆＃13;

＆＃13;

这也可以仅使用srcset：

来完成

＆＃13;

＆＃13;

<img srcset="http://via.placeholder.com/350x150 776w,
             http://via.placeholder.com/150x150 486w">

＆＃13;

＆＃13;

＆＃13;

您可以在MDN获取有关自适应图片的更多信息。