仅为移动设备加载图像

Posted 2023-03-05

技术标签:

【中文标题】仅为移动设备加载图像【英文标题】：Load an image only for mobile device 【发布时间】：2017-08-14 07:27:13 【问题描述】：

我想知道我的首页是否可以加载仅适用于移动用户的图像。我知道使用 javascript 是可能的，但我想知道我是否可以仅使用 CSS 来实现相同的目标。我试图做一些研究，但找不到我要找的东西。我不是指根据屏幕大小调整图像大小，而是加载适合移动设备的图像。

【问题讨论】：

你的意思是使用html img或使用css背景。 @frnt 使用 css 背景 :) 【参考方案1】：

利用media query将background-image改成不同的screen resolutions如下，

div
  width:100%;
  height:400px;
  background:url('http://placehold.it/350x150/f22/fff');
  background-size:100% 100%;

@media screen and (max-width : 480px)
 div
  background:url('http://placehold.it/480x150/f12/fff');
  background-size:100% 100%;
 

@media screen and (max-width : 320px)
 div
  background:url('http://placehold.it/320x150/e12/fff');
  background-size:100% 100%;

&lt;div&gt;&lt;/div&gt;

检查这个jsFiddle。

【讨论】：

@S.Reyes 选择主页 div 并使用媒体查询在不同的断点更改背景图像 url。感谢您的回答！ :) 我会尝试实施这样的方法！ :D 欢迎@S.Reyes :-)【参考方案2】：

您可以根据屏幕大小使用媒体查询来应用类。

#img 
    display: none;


/* Large Devices, Wide Screens */
    @media only screen and (max-width : 1200px) 



/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) 



/* Small Devices, Tablets */
@media only screen and (max-width : 768px) 



/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 480px) 
   #img
     display: block;
   



/* Custom, iPhone Retina */ 
@media only screen and (max-width : 320px)

【讨论】：

您好，谢谢您的回答！但是，如果我采用这种方法，它不会将所有图像加载到页面并降低性能吗？我想知道是否使用纯 css，我可以将所需的图像加载到页面。无论如何，您的所有图像都会在开始时加载，您需要优化图像，这样无论您在移动设备或桌面上显示什么，它们都不会减慢网站速度。但这应该允许您在任何屏幕尺寸上隐藏和显示您需要的内容。【参考方案3】：

是的，这是可能的。您可以使用媒体查询。示例 CSS：

#yourimage 
    display: none;


@media (max-width: 500px) 
    #yourimage 
        display: block;

此代码适用于 html 图像。这是一个 JSFiddle：

https://jsfiddle.net/vqfLokpa/

只需点击运行，然后开始缩小浏览器窗口。

【讨论】：

您好，感谢您的回复。场景是，我有两个图像。其中之一是用于桌面网站的，而且相当大。但是对于较小的屏幕（手机），我想加载该图片的较小版本。然后只需将第一张图片设置为display: none; 并将新图片设置为display: block; 如果您不确定如何实现它，我使用 JSFiddle 编辑了帖子。但这不会同时加载两个图像并降低性能吗？因为在这种情况下，它是我的首页，上面有很多媒体。 :) 好吧，浏览器只加载它适用的 CSS。因此，您可以对桌面进行媒体查询并将图像放在那里。然后它不会在手机上加载。啊，我明白了！谢谢老兄:) 我想这可能就是我要找的东西：D【参考方案4】：

根据您对@NullDev 的评论，您需要创建一个大小合适的 div 并将图像作为背景图像应用到元素上，以调节通过 CSS 加载的内容。

例如：

HTML：

<div id="image"></div>

CSS：

#image 
  position: relative;
  width: 400px;
  height: 400px; 
  background-image:url('/path/to/image');
  background-size: cover;
  background-repeat: no-repeat;

然后应用媒体查询：

@media only screen and (max-width : 480px) 
   #image
     background-image:url('/path/to/mobile/image');

我希望这会有所帮助。

【讨论】：