如何交换移动/桌面上的图像响应模式

我有以下文件夹结构桌面图像和手机的列表：如何交换移动/桌面上的图像响应模式

img: 
    img-1.png 
    img-2.png 
    img-3.png 
    img-4.png 
    img-5.png 
    img-6.png 

img/mobile: 
     img-1.png 
     img-2.png 
     img-3.png 
     img-4.png 
     img-5.png 
     img-6.png

我可以使用下面的代码来切换桌面img-1.png：

<span id="switcher"> 
    <img id="houdini" src="img/img-1.jpg" alt=""> 
</span> 

<span id="switcher2"> 
    <img id="houdini2" src="img/img-2.jpg" alt=""> 
</span> 

<span id="switcher3"> 
    <img id="houdini3" src="img/img-3.jpg" alt=""> 
</span> 

<span id="switcher4"> 
    <img id="houdini4" src="img/img-4.jpg" alt=""> 
</span> 

<span id="switcher5"> 
    <img id="houdini5" src="img/img-5.jpg" alt=""> 
</span>

CSS：

@media only screen and (max-device-width: 489px) { 
    span[id=switcher] { 
     display:block; 
     background-image: url(/mobile/img-1.jpg) !important; 
     background-repeat: no-repeat !important; 
     background-position: center !important; 
    } 
    img[id=houdini] {display: none !important;} 
}

如何避免写EV上述CSS RED img-1至6 ...我可以通过/访问ID吗？

是否可以使用!important？

（必须在IE8工作）

来源

2014-09-22 Oam Psy

使用类而不是ID，类可以应用于任何数量的元素。另外，删除！importants。这不是必须的，除非你首先做了一些可怕的错误。 – Kyle 2014-09-22 10:50:06

@KyleSevenoaks - 感谢您的评论，我会使用它们。如何保存的问题必须写每个图像的background-image：url（/mobile/img-1.jpg）。我可以访问img-ID吗？ – 2014-09-22 10:54:15

这和你以前的问题有什么不同？ http://stackoverflow.com/questions/25973118/incrementing-a-background-image-id-with-sass – cimmanon 2014-09-22 13:08:16

您可以动态地控制它

$('body').append("<style type='text/css' id="+spanid+">@media screen and (max-device-width: 489px) { span[id="+spanid+"] {/* styles */ } }</style>");

对于删除样式

$('#spanid').detach();

或者

$('#spanid').remove();

来源

2014-09-22 10:59:28 Hamix

而不是使用的背景图片桌面，你coul d地方每一对用于台式/移动图像以下彼此和通过给他们以下类切换其display类型：

Example Here

<img src="http://placehold.it/200/f30" alt="houdini" class="visible-mobile"> 
<img src="http://placehold.it/200/3f0" alt="houdini" class="hidden-mobile">

.visible-mobile { 
    display: none !important; 
} 

@media (max-width: 489px) { 
    .visible-mobile { 
    display: inline !important; 
    } 

    .hidden-mobile { 
    display: none !important; 
    } 
}

来源

2014-09-22 11:00:40

谢谢，很好的解决方案。在初始页面加载时，是否创建了2个HTTP请求？ – 2014-09-22 11:04:41

@OamPsy是的。然而，即使通过使用背景图像，也会创建2个HTTP请求，首先在HTML中显示图像元素（将在后面隐藏），然后加载背景图像。 – 2014-09-22 11:08:54

从事移动优化工作，我自己正在寻找关于图像的事情，这篇文章非常简单。但是，不会你现在加载资源的两倍？ – lemunk 2015-04-22 08:36:32

<span id="switcher" class="myswitch"> 
    <img id="houdini" src="img/img-1.jpg" alt=""> 
</span> 

<span id="switcher2" class="myswitch"> 
    <img id="houdini2" src="img/img-2.jpg" alt=""> 
</span> 

<span id="switcher3" class="myswitch"> 
    <img id="houdini3" src="img/img-3.jpg" alt=""> 
</span> 

<span id="switcher4" class="myswitch"> 
    <img id="houdini4" src="img/img-4.jpg" alt=""> 
</span> 

<span id="switcher5" class="myswitch"> 
    <img id="houdini5" src="img/img-5.jpg" alt=""> 
</span>

CSS =

@media only screen and (max-device-width: 489px) { 
    span.myswitch { 
     display:block; 
     background-image: url(/mobile/img-1.jpg) !important; 
     background-repeat: no-repeat !important; 
     background-position: center !important; 
    } 
    img[id=houdini] {display: none !important;} 
    }

来源

2014-09-22 11:00:54

<picture> 

    <source srcset="https://mockuphone.com/static/images/devices/apple-imac2015retina-front.png" media="(min-width: 1000px)"> 
    <source srcset="https://mockuphone.com/static/images/devices/apple-macbook-grey-front.png" media="(min-width: 500px)"> 
    <source srcset="https://mockuphone.com/static/images/devices/apple-iphone6splus-spacegrey-portrait.png" media="(max-width: 500px)"> 

    <img src="https://mockuphone.com/static/images/devices/apple-macbook-grey-front.png" alt="Apple Product" id="my-image-1" class="my_image" style="max-width: 100vw; max-height: 100vh;"> 

</picture>

试试这个。如果您不希望图像在浏览器中调整大小，请使用最小设备宽度和/或最大设备宽度。希望这有助于！

来源

2017-07-13 06:16:05 sarthak7gupta

如何交换移动/桌面上的图像响应模式

回答

相关问题