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

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但小写？ 似乎对我有用，以下内容。

看看它在这里工作的码笔：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%;
}
}