来自外部 CSS 的静音媒体查询答案

【问题标题】：mute media query from external CSS来自外部 CSS 的静音媒体查询
【发布时间】：2017-03-13 03:45:23
【问题描述】：

我在页面中使用 W3CSS 样式表来显示使用 ul 列表的菜单。它工作正常，但它太快切换到我的需要的最小样式。

在第 158、159 和 160 行涉及 3 个媒体查询，当视口大小等于或小于 600 像素时会发生变化：

@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 文件中静音这些媒体查询，所以我可以在我的 CSS 文件中使用 max-width: 350px 而不是 600px 覆盖它们。

【问题讨论】：

标签： css media-queries mute w3.css

【解决方案1】：

您可以做的是创建一个 custom.css 样式表并将其最后加载到您的页眉区域。这将反过来加载您的 css 样式表作为覆盖。

【讨论】：

已经尝试过这样做。但是，将 max-width: 350px 媒体查询放在任何样式表中，在 w3.css 样式表之前或之后，都没有任何效果，因为它不会覆盖 350px 和 600px 之间的行为。因此，只要 600 像素的查询仍然存在，它们就会一直切换到 600 像素，无论如何。
你有一些可以发布的代码吗？也许是一个 jfiddle .. 这样我们可以看到你有什么，并且可能只是为所述项目创建一个新类并基于该类或 ID 编写媒体。
例如，您可以将 .w3-topnav 类复制到您的 css 中，然后重命名为 .w3-topnav1 之类的名称，然后为该类创建 @media。
不幸的是，我无法向您展示 jfiddle 示例，w3css 不会通过 http 加载（jfiddle 需要 https 否则不会加载）。但是我可以让您看一下 W3Schools 示例中的 Try it 编辑器：w3schools.com/w3css/tryit.asp?filename=tryw3css_navbar 您还可以在这里找到 w3.css 样式表：w3schools.com/lib/w3.css 我的代码与那里的 ul 相同。我确实有 ul 的 id。但是尝试找出 w3.css 样式表中的所有内容确实需要一些时间，如果我需要更多修改，可能不值得。

【解决方案2】：

在查看应用于元素的各种样式并隔离 .w3-navbar 类相关样式后，我能够修改行为以满足我的需要，而无需修改原始 w3.css 样式表。

首先，我将媒体查询的样式还原为 600 像素：

@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}
}

上面的样式需要放在自定义样式表中加载afterw3.css 样式表。

这不是一个快速的解决方案，需要对原始样式表进行大量研究。就我而言，大约有 200 行，这几乎是一项简单的任务。

对于较大的样式表，我强烈建议您编写自己的样式，这将花费您更少的时间并且您会知道发生了什么。

【讨论】：