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

Question

简介

这类似于this question but unfortunately the answer only applies to greasmonkey (which only works on firefox). Further, this was asked on the stylish forum but the 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 会稍微破坏设计，但这应该是一个很好的起点。

之前：

之后：