Question

我在主题HTML中放置了一个图片，在桌面视图中看起来很棒。

我想要的是将图像隐藏在移动视图中。

这是因为对于较大的屏幕尺寸，图像处于正确的Div中，但对于较小的屏幕尺寸则不正确。

我相信以下可能是前进的方向，在这种情况下;

JQuery function 

LAYOUT
Go to file: theme.liquid
ADD - {% include 'do-not-display-mobile' %}

SNIPPET
Create a snippet called: do-not-display-mobile
Add the following - 
{% comment %} 
Does no display in mobile-view conditions
{% endcomment %}

<a href="#" title="Do not display (Mobile)" class="do-not-display-mobile">

<style>
.do-not-display-mobile{
display: none;
}
</style>

<script>
window.onload = function() {
 jQuery(function($) {   })
 });
}
</script>

Go to File:product-layout.liquid
Add to relevant elements: {% include 'do-not-display-mobile' %}

然后重复桌面视图。

更新：我认为我需要一个JQuery功能，即IF屏幕宽度<400px display none

但我不知道如何编写脚本，我使用了下面的答案 - 我。

Answer 1

因此，基于屏幕尺寸使用不同视图和样式的一种方法是使用CSS3 @media标记，max-with和min-with将帮助您基于不同的外观屏幕尺寸。比如改变背景颜色或隐藏方框或改变列数。

这是一个链接：https://www.w3schools.com/cSS/css3_mediaqueries_ex.asp

body {
    background-color: lightblue;
}

@media screen and (min-width: 400px) {
    body {
        background-color: lightgreen;
    }
}

@media screen and (min-width: 800px) {
    body {
        background-color: lavender;
    }
}

因此，您应该将css属性添加到要在不同屏幕尺寸中显示或消失的元素。并且您需要有一个选择器来表示该元素或div，就像您在css上选择标签以给它们设置样式一样

Answer 2

听起来好像是指响应式网页设计的基础知识：针对不同屏幕分辨率或类型的不同标记。

我首选的方法是HTML5和CSS3的组合。

<强> HTML

<div>
   <img class="desktop" src="/dt_image.png">
   <img class="mobile" src="/mb_image.png">
</div>

<强> CSS

img.desktop {
    display: block;
}
img.mobile {
    /* Hide mobile version */
    display: none;
}

/* Mobile breakpoint */
@media only screen and (min-device-width: 320 px) and (max-device-width: 480px) {
    img.desktop {
        /* Hide desktop version */
        display: none;
    }
    img.mobile {
        display: block;
    }
}

当然，这也为您提供了在div中为每个图像定义宽度和其他属性的自由和可能性。

Answer 3

听起来好像是指响应式网页设计的基础知识：针对不同屏幕分辨率或类型的不同标记。

我首选的方法是HTML5和CSS3的组合。

<强> HTML

<div>
   <img class="desktop" src="/dt_image.png">
   <img class="mobile" src="/mb_image.png">
</div>

CSS（HTML表格内）

<style>
img {
    margin-top: 60px;
}   

img.desktop {
    display: block;
}
img.mobile {
    /* Hide mobile version */
    display: none;
}

/* Mobile breakpoint */
@media only screen and (min-device-width: 320 px) and (max-device-width: 480px) {
    img.desktop {
        /* Hide desktop version */
        display: none;
    }
    img.mobile {
        display: block;
    }
}
</style>

当然，这也为您提供了在div中为每个图像定义宽度和其他属性的自由和可能性。

JQuery函数？在移动设备中查看时，图像会消失，仅在较大屏幕尺寸下查看时才会显示

3 个答案: