Css @宽度小于1024px的介质不工作

我有一个灵活的分区网格。 我想根据屏幕大小更改该div的宽度（单位为%）

我的scss

@media

：

@介质（最大宽度：1023.9px）{
宽度：33.3333%；
}
@介质（最大宽度：768px）{
宽度：50%；
}
@介质（最大宽度：599px）{
宽度：100%；
}
@介质（最小宽度：1024px）{
宽度：25%；
}
CSS是Cascade样式表的首字母缩写

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

一旦你知道了，你就可以用一种合适的方式修改你的代码。如果不想重新思考代码，可以使用
防止重写！重要信息

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

警告：正在使用
！重要信息
是一种不好的做法，原因是

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%最大宽度：599px
媒体查询中选择code>

这里还有一个旁注：仅在媒体查询中使用整数值。世界上没有一个屏幕有
.9
甚至
.5
像素。
你能分享完整的CSS代码吗？与班级和everything@TemaniAfif，编辑了我的问题OK，使用1000px您的解决方案就可以了。但是我怎样才能用低于1000px的速度来测试我的代码呢？@Cristian Traina为什么你展示了一个糟糕的实践而不是你提到的最佳实践？这样，我认为这不是一个好的答案，因为您的示例代码不是推荐的方法，因为我无法解释最佳实践，因为不清楚他想要实现什么。如果他不能像经常发生的那样更改代码，那么“坏习惯”是唯一的解决方案。我同意这样一个事实：
！必须尽可能少地使用important
，这是肯定的。一个例子（根据你的媒体查询调整图像大小）：请检查你的代码。我检查了你的例子，检查了我的页面，它真的有效。当我调整浏览器大小时，它可以正常工作，但在“响应”中，我仍然存在这个问题。