媒体查询块显示:无问题

Question

媒体查询有小问题在我的网页内我的一个部分包括这个

 <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 属性，我使用最大宽度和 % 来确保它们保持在我希望它们所处的位置对于左侧的每个元素，这一切都很好，所以在这一部分中.header-left但是，当重新调整大小时，.header-right 并没有消失，是否有办法修复它，或者我只是在这个例子中做错了？

Answer 1

由于此小提琴适用于您提供的代码 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">