Html 为什么'；在我的媒体屏幕查询工作中，我可以'；不能让我的网站响应？

根据屏幕大小，我的文章可能有两列或四列。我使用媒体查询作为我的文章标题类。然而，当网站以不同的分辨率显示时，似乎什么也没有发生

我尝试添加@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%;
  }
}

креативно сликање

我的同僚们都是精英。伊萨姆，雷！

@媒体屏幕和屏幕（最小宽度：576px）{
.技能{
浮动：左；
宽度：50%；
}
}
@媒体屏幕和屏幕（最小宽度：1200px）{
.技能{
宽度：25%；
}
}

---

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

您是否尝试过仅使用@media，而不使用小写？似乎在以下方面对我有效

在codepen上查看它，在这里工作：

---

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

您的代码完全按照预期工作<代码>宽度：在1200px及以上的屏幕上为25px。和

宽度：在576px及更大屏幕上为50%

<代码>宽度：100%在非常小的屏幕上。是的，但我在index.html文件中有四项技能。根据屏幕大小，它们应该分为四列或两列学习flexbox您的生活会轻松得多。创建一个包装器

，并将其设置为

display:flex；证明内容：之间的空间。从
.skill
中删除
浮动：left
。感谢您的回答。问题出在HTML文件中，我忘了删除每个列的标记，这就是文本无法正确显示的原因…：）很容易出错，很高兴您对其进行了排序！谢谢你的回答。问题是在HTML文件中，我忘记删除每个列的标记，这就是文本无法正确显示的原因。。。
 @media only screen and (min-width: 576px) {
  .skill {
    float: left;
    width: 50%;
  }
}
@media only screen and (min-width: 1200px) {
  .skill {
    width: 25%;
  }
}