【问题标题】：how to override @media (max-width) using stylish如何使用时尚覆盖@media（最大宽度）
【发布时间】：2017-12-24 05:40:10
【问题描述】：

简介

这类似于this question，但不幸的是，答案仅适用于 greasmonkey（仅适用于 firefox）。此外，这是在时尚论坛上提出的，但 answer 含糊不清。

问题

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

#sidebarContent {display:none}

第二部分必须如何转换这一点

media (max-width: 1199.99999px)

到这里

media (max-width: 100%)

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

【问题讨论】：

标签： css stylish

【解决方案1】：

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

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

~~现在，把它们放在一起 - 连同其他一些 CSS 清理，例如删除 padding 和 margin 并为 .mainContainer 设置一个新的 width，然后你就明白了~~

#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 会稍微破坏设计，但这应该是一个很好的起点。

之前：

之后：

【讨论】：

侧面还有边距..我需要它来覆盖屏幕的 100% 宽度..
正如我在这里宣传的那样 > userstyles.org/styles/145425/azure-help-expander
如果我手动将最大宽度覆盖为 100% 但使用 chrome devtools.. 而不是时尚本身，则可以实现上述目标
@abbood 我编辑了答案。您必须找到要覆盖的正确选择器，然后将它们添加到我在答案中输入的媒体查询中。我的回答不是寻找选择器，而是关于如何覆盖默认媒体查询。