在移动设备上隐藏图片

Question

我是一个有用的助手，可以为您翻译文本。

我正在尝试在我的网站上隐藏某些移动设备上的图像。我已经尝试了各种html和css代码，但是我无法让它正常工作。这可能与我的div类和Id标签有关。

请有人帮忙让它正常工作吗？

HTML:

<section id="left-sidebar">
 <div class="logo">
    <a href="#intro" class="link-scroll">
      <img src="assets/images/other_images/logo.png" alt="description of image">
      <img src="assets/images/other_images/nav.png" class="nav">
    </a>
 </div>

CSS（层叠样式表）：

@media (max-width: 600px) {
    #left-sidebar .logo .nav  {
        display:none;
    }
}

- smither123

Answer 1

您需要使用@Media screen：

screen 用于计算机屏幕、平板电脑、智能手机等。

结合pixel-ratio以满足您的需求。在此处查看更多示例

例如（三星Galaxy S3）：

/* ----------- Galaxy S3 ----------- */

/* Portrait and Landscape */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 2) 
{
    // insert here your custom styles
    #left-sidebar .logo .nav  {
       display:none;
    }
}

- Jordi Castilla

---

你尝试过什么？你有检查我提供的链接中的示例吗？你必须检查设备的宽度和高度，并在规则参数中进行模拟... - Jordi Castilla

我已经在我的移动设备上尝试过了，当我在Windows中调整浏览器大小时它没有任何反应。这与div类和id无关，这是我最初想到的，因为当我删除@media screen部分时，它会删除图像。 - smither123

Answer 2

<style>
.youClassname{display:inline;}
@media screen and (min-width: 320px) {
      .yourClassname{
            display:none !important;
   }
 }

@media screen and (max-width: 768px) {
      .yourClassname  {
            display:none !important;
   }
 }

</style>

- Chandan Sharma

---

请考虑在答案中添加您的解释，这将有助于更多人以后理解。 - Aminul

Answer 3

不要使用display:none，尝试使用这个方法

@media (max-width: 600px) {
    #left-sidebar .logo .nav  {
        display:hidden !important;
    }
}

如果这段代码还没有生效，请检查设备宽度并继续操作。

- sanoj lawrence

---

谢谢，还是不行 :/ 真的很困惑。没有 @media 时它运行得很好，但一旦我添加它，它就完全没有影响。我已经尝试重新调整浏览器大小并在移动设备上查看它了。 - smither123

@smither123 现在试试，我做了一些更改。 - sanoj lawrence

Answer 4

我在 JSFiddle 上运行了你的 HTML 和 CSS。我只是更改了你的 CSS 为：

  img {
            display:none;
        }

并且得到了this

不确定这是否是您正在寻找的内容

- msm.oliveira

Answer 5

这对我来说似乎奏效了，这有点奇怪

@media (max-width: 768px) {
      #left-sidebar .logo .nav  {
            display:none;
   }
 }

- smither123

Answer 6

<style>
.youClassname{display:inline;}
@media screen and (max-width: 320px) {
      .yourClassname{
            display:none !important;
   }
 }

@media screen and (min-width: 768px) {
      .yourClassname  {
            display:none !important;
   }
 }

</style>

- Gamers Stop