如何使用时尚覆盖@media（max-width）

Question

简介

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

问题

我想删除azure help page中的左栏 展开主体使其覆盖屏幕的宽度。 第一部分可以通过这个

轻松完成

#sidebarContent {display:none}

第二部分必须如何转换

media (max-width: 1199.99999px)

到这个

media (max-width: 100%)

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

Answer 1

要override a media query，您只需加载另一个媒体查询 - 也适用于您的设备 - 后。

嗯......你想要一个适用于一切的直接媒体查询。最好的方法是使用@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可以稍微破坏设计，但这应该是一个很好的起点。

在：

在：