Question

我尝试调整div.social-menu-item的大小。但是@media min-width的顺序对我来说无法正常工作。当我的屏幕小于500像素时，它将使用@media（最小宽度：768像素）。

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

我有一个问题，为什么？！我不知道如何解决这个错误！看到下面的图片了解更多...

.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最小宽度或最大宽度不会影响到元素。这个问题解决不了！

Answer 1

改为使用max-width。那应该按照您需要的顺序应用规则：

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

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

Answer 2

在媒体查询中，请使用最小和最大宽度，因为您要使响应速度更快并尝试根据条件宽度进行支持

媒体最小宽度无法按指定顺序正确运行

2 个答案: