CSS 忽略@media only 屏幕标准

Question

为什么我的 CSS 风格 sheet 没有任何效果？

我有以下代码，它在桌面屏幕上显示占位符 div，在 mobile/tablet 屏幕上显示时消失。

@media only screen and (min-width: 940px) {
  .image_placeholder {
    display: block;
  }
}

.image_placeholder {
  display: none;
}

<div class="image_placeholder">
  This is an image placeholder
</div>

为什么我不能让它工作：当屏幕宽度低于 920px 时，将 .image_placeholder 和 css 设置为 display:none;，并将其设置为 display:block;当它在 920px 或以上时。

为什么无论屏幕高于还是低于 920px 阈值，.image_placeholder 都会消失？

Answer 1

假设第二个 image_placeholder 前面缺少的 . 在实际代码中不存在：

CSS rules, when selectors are of equal specificity, are applied in order.

所以，如果媒体查询适用:

.image_placeholder { display:block; }
.image_placeholder { display:none; }

所以得到 none.

如果媒体查询不适用，那么您只需：

.image_placeholder { display:none; }

所以得到 none.

订单很重要.

如果您希望媒体查询规则覆盖非媒体查询规则，则将媒体查询放在last.

Answer 2

你应该在主CSS之后写媒体查询。

.image_placeholder {
  display: none;
}

@media only screen and (min-width: 940px) {
  .image_placeholder {
    display: block;
  }
}

<div class="image_placeholder">
  This is an image placeholder
</div>

编辑：

带有图像的示例代码如下 -

.image_placeholder {
  display: none;
}

@media only screen and (min-width: 940px) {
  .image_placeholder {
    display: block;
  }
}

<div class="image_placeholder">
  <img src="https://via.placeholder.com/500x500.jpg">
</div>

<p>This is sample text to test that the placeholder image div leaves no white space in mobile resolution.</p>

Answer 3

你应该加上句号。在 class 名称前面，例如 .image_placeholder.

CSS 忽略@media only 屏幕标准

CSS is ignoring @media only screen criteria

html

css

dreamweaver