Question

我正在尝试仅在移动设备上观看时才会显示图片。我让它不显示在我的桌面css中，但现在即使我在媒体查询中写它也不会显示。任何想法为什么它不会出现？

HTML：

 <div class="panel specs">
  <div class="content">

  <a name="jumpspecs"></a>

<h2> Specifications </h2>
<img src="images/vespaspecs.png" alt="vespaspecs">

<div class="mobileshow">
<img src="images/mobilevespa.png" alt="mobilevespa">
</div>

</div>

CSS：

 .specs .mobileshow {
   display: none;
 }

/* MOBILE */

@media (max-width: 667px) {

.specs .mobileshow {
  display: block;
  margin: 0 auto;
}

Answer 1

看起来你的CSS工作正常，尽管你最后错过了一个结束括号：

@media (max-width: 667px) {
  .specs .mobileshow {
    display: block;
    margin: 0 auto;
  }
}

http://codepen.io/anon/pen/yYZEbp

Answer 2

您应该将图片的css属性更改为＆＃34; visibility＆＃34;而不是显示。您可以在＆＃34; visibility：hidden＆＃34;之间切换。和＆＃34;能见度：可见＆＃34;媒体大小之间

Answer 3

我认为除了你的代码之外还有别的东西。

我复制了你的代码并且工作正常。 http://jsfiddle.net/b9g363od/

.specs .mobileshow {
   display: none;
 }

@media (max-width: 667px) {
  .specs .mobileshow {
    display: block;
    margin: 0 auto;
  }
}

您是否尝试过重置浏览器？ https://superuser.com/questions/220179/how-can-i-do-a-cache-refresh-in-google-chrome

Answer 4

您在媒体查询中缺少括号

/* MOBILE */

@media (max-width: 667px) {

.specs .mobileshow {
  display: block;
  margin: 0 auto;
}

}

更新CSS并按ctrl + f5

进行硬刷新

仅移动图像显示问题

4 个答案: