css - 如何使用时尚覆盖@media（最大宽度）

Question

介绍

这与此问题类似，但不幸的是，答案仅适用于 greasmonkey （仅适用于 firefox）。此外，这是在时尚论坛上提出的，但答案模棱两可。

问题

我想删除azure 帮助页面中的左栏并展开主体以使其覆盖屏幕的宽度。第一部分可以很容易地完成

#sidebarContent {display:none}

第二部分必须如何转换

media (max-width: 1199.99999px)

对此

media (max-width: 100%)

但我不知道如何使用时尚的..想法来做到这一点？

Answer 1

要覆盖一个媒体查询，您只需要在它之后加载另一个媒体查询-这也适用于您的设备。

嗯...您想要一个适用于所有内容的直截了当的媒体查询。最好的方法是使用@media (min-width: 1px)，因为它包括所有设备。

现在，把它们放在一起——连同其他一些 CSS 清理，比如删除padding和margin设置一个新width的.mainContainer，你就得到了

#sidebar {
    display: none;
}
@media (min-width: 1px) {
    .mainContainer {
        margin: 0 auto;
        width: 100vw;
        padding: 0;
    }
    body>.container {
    padding: 0;
}
}

新代码：（使用不同的宽度选择器）

#sidebar {
    display: none;
}
@media (min-width: 1px) {
    .mainContainer { /*example styles*/
        margin: 0 auto;
        width: 100vw;
    }
    body>.container {
    padding: 0;
}
    body>.mainContainer>main {
    max-width: 100vw!important;

}
}

您仍然必须根据自己的喜好调整填充，因为将填充设置为 0 会稍微破坏设计，但这应该是一个很好的起点。

前：

后：