0

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

最小宽度更早，@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 不会影响元素。而且这个问题解决不了！！
4

2 回答 2

1

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

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

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

于 2019-08-20T08:23:41.303 回答
0

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

于 2019-08-21T00:36:42.930 回答