如何使用时尚的方式覆盖@media(最大宽度) [英] how to override @media (max-width) using stylish

问题描述

这类似于此问题，但不幸的是，答案仅适用于greasmonkey(仅适用于Firefox).此外，这是在时尚的论坛上提出的，但 answer 模棱两可.

this is similar to 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 was ambiguous.

我想删除和 展开主体使其覆盖屏幕的整个宽度. 第一部分可以很容易地完成

I want to remove the left column in the azure help page and expand the main body to make it cover the widht of the screen. The first part can easily be done by this

#sidebarContent {display:none}

第二部分必须如何融合

media (max-width: 1199.99999px)

对此

media (max-width: 100%)

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

But I have no idea how to do that using stylish.. ideas?

推荐答案

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

To override a media query you just need to load another media query - that also applies to your device - after it.

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

Well...you want a blunt media query that applies to everything. The best way is to use @media (min-width: 1px) since that includes all devices.

现在，将它们放在一起-连同其他CSS清理(如padding和margin删除)并为.mainContainer设置一个新的width，您会得到

Now, put it all together - along with some other CSS cleanups like padding and margin removal and setting a new width for .mainContainer and you get this

#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会使设计有些中断，但这应该是一个很好的起点.

之前:

之后:

这篇关于如何使用时尚的方式覆盖@media(最大宽度)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！