CSS 忽略 @media only 屏幕标准

问题描述

为什么我在 CSS 样式表上所做的一切都不起作用？

我有以下代码，它在桌面屏幕上显示占位符 div，在移动/平板电脑屏幕上显示时消失。

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

为什么我不能让它工作：当屏幕宽度低于 920 像素时，将带有 css 的 .image_placeholder 设置为display:none;，当屏幕宽度为 920 像素时将其设置为 display:block; 或

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

解决方法

假设第二个 . 前面缺少的 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。

订单很重要。

如果您希望媒体查询规则覆盖非媒体查询规则，请将媒体查询放在最后。

您应该在主 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>

您应该添加句号。在类名前，如 .image_placeholder。

dreamweaver html