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;
    }
}

Answer 1

您必须使用@Media screen：

屏幕用于电脑屏幕，平板电脑，智能手机等。

将其与pixel-ratio结合使用以满足您的需求。 Check more examples here

例如（对于三星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;
    }
}

Answer 2

而是使用display:none试试这个

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

如果仍然无效，此代码将起作用请检查设备宽度并继续

Answer 3

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

  img {
            display:none;
        }

得到this

不确定它是否正是您要找的

Answer 4

这似乎对我有用，这很奇怪

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

Answer 5

<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>

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>

隐藏移动设备的图像

6 个答案: