为什么我的媒体屏幕查询不起作用，为什么我的网站无法响应？

Question

我的文章可能有两到四列，具体取决于屏幕尺寸。我使用媒体查询来查询标题类别的文章。但是，以不同的分辨率显示网站时似乎什么也没发生。

我尝试仅添加@media屏幕而不是@media屏幕，但这都不起作用。

<!-- single skill (x4) -->

      <article class="skill">
        <span class="skill-icon">
          <i class="fas fa-paint-brush"></i>
        </span>
        <h3 class="skill-title">креативно сликање</h3>
        <p class="skill-text">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam, rem!
        </p>
      </article>

<!-- end single skill -->


@media screen and (min-width: 576px) {
  .skill {
    float: left;
    width: 50%;
  }
}
@media screen and (min-width: 1200px) {
  .skill {
    width: 25%;
  }
}

为了在576px和1200px屏幕上分别获得两到四列文章，我应该对代码进行哪些更改？

Answer 1

代码正对我有效。将4篇文章粘贴为HTML，并在调整屏幕大小时，可以根据需要将其降至每行2篇文章。是否有不适合您使用的特定设备，操作系统或浏览器？

Answer 2

您是否尝试仅使用@media，但使用小写字母？似乎为我工作以下。

在这里工作的Codepen上进行查看：https://codepen.io/CTBroon/pen/xxKOEGq

 @media only screen and (min-width: 576px) {
  .skill {
    float: left;
    width: 50%;
  }
}
@media only screen and (min-width: 1200px) {
  .skill {
    width: 25%;
  }
}