要覆盖一个媒体查询,您只需要在它之后加载另一个媒体查询-这也适用于您的设备。
嗯...您想要一个适用于所有内容的直截了当的媒体查询。最好的方法是使用@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 会稍微破坏设计,但这应该是一个很好的起点。
前:

后:
