2

介绍

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

问题

我想删除azure 帮助页面中的左栏并展开主体以使其覆盖屏幕的宽度。第一部分可以很容易地完成

#sidebarContent {display:none}

第二部分必须如何转换

media (max-width: 1199.99999px)

对此

media (max-width: 100%)

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

4

1 回答 1

1

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

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

现在,把它们放在一起——连同其他一些 CSS 清理,比如删除paddingmargin设置一个新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 会稍微破坏设计,但这应该是一个很好的起点。

前: 在此处输入图像描述

后: 在此处输入图像描述

于 2017-07-19T06:37:10.533 回答