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

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

之前:

之后: