Question

我似乎无法在iPhone上隐藏#right图像。我希望它显示在我的webbrowser上，但不能在小型手机上显示。

编辑我已尝试visibility: hidden !important; 我试过screen and 我试过display: none 我试图通过班级名称隐藏

谢谢！

   <html>
<head>
    <meta content="text/html; charset=ISO-8859-1"
    http-equiv="content-type">
  <meta name="viewport" content="width=device-width, initial-scale=1" /> 
</head>
<style> 
    html {
    width: 470px;
    height: 725px;
  }
  div {
    position: absolute;
    left: 150px;
    top: 75px;
    width: 70%;
  }
  #left {
    width: 300px;
    height: 700px;

  }
  #right {
     position: absolute;
     width: 300px;
     height: 700px;
     right: 10px;
     z-index: -1;
  }
  #title {
    position: absolute;  
    top: 10px;
    left: 31%;
    width: 330px;
    height: 90px;

  }
  #rightP {
        position: absolute;  
    width: 75%;
    left:30px;
  }
  #cross {
        position: absolute;  
        top: 610px;
        left: 48%;

        width: 30px;
        height: 30px;
  }
@media screen and (max-width: 600px) {
   #right{ 
    display: none !important;
    visibility: hidden !important;
    }
   .mobile-hide {
     display: none;
     visibility: hidden;
   }

 }

  body {
        min-width: 300px;

    background-color: #f1e2c1;
  }
</style> 
<body  link="#000000" vlink="#808080" alink="#FF0000">
  <img id="title" src="images/title.jpg"> 
    <img id="left" src="images/left.jpg">
    <img class="mobile-hide" id="right" src="images/right.jpg">
    <div>
        <p > 


    </p>
    </div>
  <img id="cross" src="images/cross.jpg"> 

</body>
</html>

Answer 1

在您网站上的样式表代码中，您的媒体查询上方有这一行：

//small screen sizes

//不能用于CSS注释（但仅限于PHP和JS）！事实上，这会弄乱你的代码，因为浏览器认为它是某种CSS并且无法处理它（以及跟随它的所有其他代码）。

所以只需将该行更改为

即可

/*small screen sizes*/

它会起作用。

Answer 2

我强烈建议您在使用css时不要使用id，因为类往往会执行所需的所有工作而没有这种特定级别，对于此示例，您需要做的就是切换显示的可见性

  @media screen and (max-width: 600px) {
    #right { 
       visibility: hidden !important;
    }
  }

希望这有帮助！

Answer 3

为该特定元素添加媒体查询，或创建名为mobHide的类并创建类似以下内容的

元素

  @media screen and (max-width: 767px) {
    #right { 
       display: none !important;
    }
  }

特定于类 - 将.mobHide类应用于您要在移动设备上删除的任何内容。

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

在移动网站上隐藏图片？

3 个答案: