我在页面中使用W3CSS样式表来显示使用 ul 列表的菜单。 它工作正常，但它很快就会根据我的需要切换到最小的风格。
第158,159和160行涉及3个媒体查询，当视口大小等于或小于600px时会发生变化：
@media screen and (max-width:600px){.w3-topnav a{display:block}.w3-navbar li:not(.w3-opennav){float:none;width:100%!important}.w3-navbar li.w3-right{float:none!important}}
@media screen and (max-width:600px){.w3-topnav .w3-dropdown-hover .w3-dropdown-content,.w3-navbar .w3-dropdown-click .w3-dropdown-content,.w3-navbar .w3-dropdown-hover .w3-dropdown-content{position:relative}}
@media screen and (max-width:600px){.w3-topnav,.w3-navbar{text-align:center}}
我希望它切换到350px，但我希望每次需要应用任何修改时都避免编辑w3.css文件，这也是因为我也在其他页面中使用该文件，我需要那里的默认行为。
有没有办法让我的任何CSS中的w3.css媒体查询静音？基于Javascript的解决方案被接受，但如果可能的话，我想避免这些。
非常感谢您提前
修改
我不确定我的要求是否足够清楚，所以我会在这里重新定义它。
我想从w3.css文件中静音那些媒体查询，因此我可以使用max-width：350px而不是600px在我的CSS文件中覆盖它们。
答案 0 :(得分：0)
您可以做的是创建custom.css样式表并在标题区域中加载最后一个样式表。这将依次加载您的CSS样式表作为覆盖。
答案 1 :(得分：0)
在查看应用于元素的各种样式并隔离.w3-navbar类相关样式之后，我已经能够修改行为以满足我的需要，而无需修改原始的w3.css样式表。
首先，我已经在600px处恢复了媒体查询的样式：
@media screen and (max-width:600px){
/* reverting the effects of the original @media query */
.w3-navbar li:not(.w3-opennav){float:left; width: initial!important}
.w3-navbar li.w3-right{float: right !important;}
.w3-navbar .w3-dropdown-click .w3-dropdown-content,
.w3-navbar .w3-dropdown-hover .w3-dropdown-content{position:static}
.w3-navbar{text-align:initial}
}
然后我将原始的w3.css样式添加到350px的媒体查询：
@media screen and (max-width:350px){
/* these styles are the same as the ones in the original w3.css stylesheet,
in @media screen and (max-width: 600px), lines 158 to 160 */
.w3-navbar li:not(.w3-opennav){float: none; width: 100%!important}
.w3-navbar li.w3-right{float: none !important;}
.w3-navbar .w3-dropdown-click .w3-dropdown-content,
.w3-navbar .w3-dropdown-hover .w3-dropdown-content{position:relative}
.w3-navbar{text-align:center}
}
上面的样式需要放在加载after w3.css样式表的自定义样式表中。
这不是一个快速的解决方案，涉及对原始样式表的大量研究。在我的情况下，有200行左右，这是一个几乎容易的任务。
对于较大的样式表，我强烈建议您编写自己的样式，这将花费您更少的时间，您将知道发生了什么。