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

Question

我的文章可能有 two-four 栏，具体取决于屏幕大小。我对标题为 class 的文章使用了媒体查询。但是，当网站以不同的分辨率显示时，似乎没有任何反应。

我尝试添加@media ONLY screen 而不是@media screen 但这也不起作用。

<!-- 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%;
  }
}

为了在 576 像素和 1200 像素的屏幕上分别显示两栏或四栏文章，我应该更改我的代码什么？

Answer 1

您是否尝试过只使用@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%;
  }
}

Answer 2

代码按原样为我工作。将 4 篇文章粘贴到 HTML 中，当屏幕调整大小时，它会根据需要下降到每行 2 篇文章。是否有特定设备、OS 或浏览器不适合您？

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

Why doesn't my media screen query work, I can't make my website responsive?

html

css

media-queries

responsive-design