在手机和平​​板电脑上更改图像（Semplice主题）

Question

我正在使用Semplice Theme来构建我的投资组合并遇到了挑战。我想学习如何在较小的设备上更改图像 - 包括移动设备和平板电脑。在编码时我是新手。

我在stackoverflow上搜索了一个答案，但对答案感到困惑，因为我发现的代码/解决方案与Semplice上的图像代码不同。

很高兴知道。在Semplice主题中，您可以在进入正在编辑的页面上的内容编辑器之前编写自定义代码，它看起来像这样。

img代码我看起来像这样：

<img class="live-image" src="/02_shirt.png" alt="02_shirt" style="">
<img class="live-image" src="/03_bag.png" alt="03_bag" style="">

他们都在一个单独的div中：

<div class="column-image column-img-full left">
<div class="column-image column-img-full right">

最佳， 射线

Answer 1

看看media_queries这就是你要找的东西

只需将这个小小的自定义CSS添加到“Semplice”→“高级样式”→“自定义CSS＆amp; JS'→'自定义CSS'

选择您想要的任何屏幕

在这些媒体查询之间放置您的类或ID选择器。

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

}

/* Extra Small Devices, Phones */
@media only screen and (min-width: 544px) {

}

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

}

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

}

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

}

并隐藏元素使用：

display:none;

并显示用途：

display:block;

你可以这样：

    .hidden-xs-sm-md{
        display:none;
    }
    
      /* Medium Devices, Desktops */
        @media only screen and (min-width: 992px) {
        
    
          .hidden-xs-sm-md{
               display:block;
           }
        
        }

   
    <img class="live-image hidden-xs-sm-md" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/24/Blue_Tshirt.jpg/220px-Blue_Tshirt.jpg" alt="02_shirt" style=""> 
    <img class="live-image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/24/Blue_Tshirt.jpg/220px-Blue_Tshirt.jpg" alt="03_bag" style="">

hidden-xs-sm-md 此类会隐藏移动设备和平板电脑的元素，但该元素将在笔记本电脑和桌面上可见