html - 媒体查询 block 显示 :none issue

Question

遇到媒体查询的小问题在我的 html 里面我的一个部分包括这个

 <div class="header-left">
    </div>
    <div class="header-center">
    <ul>
            <li class="end"><a href="#">ETc</a></li>
            <li><a href="#">Etc</a></li>
            <li><a href="#">Etc</a></li>
            <li><a href="#">Etc</a></li>
        </ul>
    </div>
    <div class="header-right">
    </div>

这是我网站的标题部分，我将它分成 3 个部分，标题左右只是空的占位符，以保持居中当我以较低的宽度使用媒体查询时，我希望左右消失为此我使用了

@media(max-width:600px){
 
	.header-left{display:none;}
	.header-right{display:none;}	  
	}

对于这 3 个的 css 属性，我使用 max-width 和 % 来确保它们保持在我希望它们处于的位置对于左侧的每个元素，这一切都很好，所以在这部分.header-left但是，当 .header-right 调整大小时，它不会消失有没有办法修复它，或者我只是在这个例子中做错了？

Answer 1

由于此 fiddle 适用于您提供的代码 https://jsfiddle.net/uhqugL7n/

尝试添加 !important至 .header-left和 .header-left像这样:

.header-left{display:none !important;}

很可能是某些东西覆盖了您的媒体查询。

还要确保在页面的头部部分有这样的内容:

<meta name="viewport" content="width=device-width, initial-scale=1.0">