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个部分标题左右两边都是空位置保持中间位于中间位置当我使用较低宽度的媒体查询时，我希望左右消失因为我用了

＆＃13;

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

＆＃13;

对于这些3的css属性我使用max-width和％来确保它们保持在我希望它们位于的位置并且这一切都适用于左侧的每个元素，所以在这一部分 .header左然而.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">

媒体查询块显示：无问题

1 个答案: