@media 不适用于小于 1024px 的宽度

Question

我有一个 div 的弹性框网格。我想根据屏幕尺寸更改 div（以 % 为单位）的宽度。

我的css @media:

   @media (max-width: 1023.9px) {
      width: 33.3333%;
    }

    @media (max-width: 768px) {
      width: 50%;
    }

    @media (max-width: 599px) {
      width: 100%;
    }

    @media (min-width: 1024px) {
      width: 25%;
    }

但是当我在 Chrome 的响应工具中测试它时，我只得到了这个：

500px宽度的情况下，没有变化，

当我将屏幕尺寸更改为 1020 时，没问题，max-width: 1023.9px 正在工作。 1200 可以，min-width: 1024px 正在工作。但小于 1024 - 我得到了奇怪的东西。我做错了什么？

为我的网格生成 css-class:

.image-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  background-color: #f6f6f6; }
  .image-grid .image-wrapper {
    width: 25%;
    position: relative; }
    .image-grid .image-wrapper::before {
      display: block;
      content: '';
      width: 100%;
      padding-top: 88.23529%; }
    @media (max-width: 1023.9px) {
      .image-grid .image-wrapper {
        width: 33.3333%; } }
    @media (max-width: 768px) {
      .image-grid .image-wrapper {
        width: 50%; } }
    @media (max-width: 599px) {
      .image-grid .image-wrapper {
        width: 100%; } }
    @media (min-width: 1024px) {
      .image-grid .image-wrapper {
        width: 25%; } }

嗯，现在当我调整浏览器大小时它工作正常window，我通常得到 1 列 550px 和 2 列 700px。问题已回答，但在 "Responsive" 工具中，550px 和 700px 仍然无法正常工作。可能是我不懂这个工具。

终于解决了。问题完全是愚蠢的：我忘记添加 meta 标签，所以响应工具无法正常工作。不要忘记那条重要的线。 <meta name="viewport" content="width=device-width, initial-scale=1.0">

Answer 1

CSS 是级联样式的首字母缩写 Sheet。

这意味着规则以级联方式匹配。如果您的视口宽度介于 1000 和 1024 之间，则 33.3333% 是最后匹配的，它将被应用，覆盖之前的所有内容。

一旦你知道了，你就可以以适当的方式更改你的代码。如果您不想重新考虑您的代码，可以使用 !important.

来防止覆盖

@media (max-width: 1000px) {
  width: 50% !important;
}

Warning: Using !important is a bad practice, the reason is here

Answer 2

CSS 中的每条规则都可以覆盖同一选择器之前的任何规则。因此，您只需要切换代码即可使其正常工作：

@media (max-width: 1023.9px) {
  width: 33.3333%;
}

// experimental
@media (max-width: 1000px) {
  width: 50%;
}

@media (max-width: 768px) {
  width: 50%;
}

@media (max-width: 599px) {
  width: 100%;
}

//
@media (min-width: 1024px) {
  width: 25%;
}

你的规则相互覆盖的原因是因为它们都有相同的选择器，虽然 max-width: 599px 是准确和正确的，但后来出现的 max-width: 1023.9px 也是如此，因此它覆盖了前一个 width: 100%; 来自 max-width: 599px 媒体查询。

此处附注：仅对媒体查询使用整数值。世界上没有.9甚至.5像素的屏幕。

@media 不适用于小于 1024px 的宽度

@media not working with width less than 1024px

css

sass

percentage

media-queries