媒体最小宽度不能按指定的顺序正常工作答案

【问题标题】：media min-width don't work correctly in order specified媒体最小宽度不能按指定的顺序正常工作
【发布时间】：2019-12-10 18:50:16
【问题描述】：

我尝试调整 div.social-menu-item 的大小。但是@media min-width 的顺序对我来说不能正常工作。当我的屏幕小于 500px 时，它使用 @media (min-width: 768px)。

最小宽度更早，@media min-width 240px 写在 540px 之前写在 768px 之前

我可以问一个问题，为什么？！！这个bug不知道怎么解决！！！更多内容见下图……

.social-menu-item {
    height: 100%;
    width: 12%;
    display: inline-table;
}
@media only screen and (min-width: 240px) {
    .social-menu-item {
        width: 50%;
        background: #fff;
    }
}
@media only screen and (min-width: 568px) {
    .social-menu-item {
        width: 25%;
        background: #000;
    }
}
@media only screen and (min-width: 768px) {
    .social-menu-item {
        width: 12%;
        background: #fff;
    }
}

住在http://namvarii.ir/ 社交图标中。

我使用 max-width 为我解决了这个问题，但它不正确。

这个问题没有解决，因为我认为视图滑块已修复。当我更改浏览器大小 CSS min-width 或 max-width 不会影响元素。而且这个问题解决不了！！

【问题讨论】：

请在问题本身中添加您的代码，作为文本而不是图像。此外，此开发工具屏幕截图报告的行号似乎显示了正确的级联行为。
好的，我添加了代码以提高可读性
对我来说很好：jsfiddle.net/v3g9wu1s 您的预期结果到底是什么？ “CSS”中的“C”代表“级联”，所以是的，后来出现的规则比之前设置的具有等效选择器的规则具有更高的优先级。
@kaiido 请看图片，你能描述一下屏幕低于 200px 时，媒体（最小宽度 768px）工作吗？！有什么想法吗？
我已经看到截图了，里面的一切都正常了：(768px) 设置在第 1642 行，而 (568px) 设置在 1636。由于里面的两个规则是相同的，所以在 (768px) 之后定义的将覆盖前一个 (568px)。这就是 CSS 的工作原理。就像你做body { background: red; background: green} 一样，它会是绿色的。

标签： css

【解决方案1】：

请改用max-width。这应该按照您需要的顺序应用规则：

max-width 768px = 568 -> 768
max-width 568px = 240 -> 568
max-width: 240px = 0 -> 240

工作笔：https://codepen.io/antonbks/pen/oNvzyLP

【讨论】：

之前使用过，max-width 568 writeen before 568px before 240px。使用此方法时，不受任何代码影响。如果我在@media 中为 .social-menu-item 使用任何 CSS，它会影响
如果我使用 @media (max-width: 560px) { .social-menu-item {width:50px}} 当我的屏幕为 360px 时不会影响 .social-menu-item 中的任何内容。
检查 codepen，我稍微更改了断点，因为它很难在 codepen 上获得 240px
我知道，我知道它必须有效，但在我的问题中它不起作用，我试过了。不工作！我不知道有什么问题。为什么不工作呢？！！！
如果你能把你所有的代码放在一个codepen中，我可以看看

【解决方案2】：

在媒体查询中使用最小和最大宽度，因为您试图做出响应并尝试根据条件宽度提供支持

【讨论】：