Question

我正在尝试进行媒体查询，以便在我应用类时隐藏一些文本，因为它使其响应，我通常使用基础但我需要自定义媒体查询。

似乎没有申请。

@media only screen and (min-width: 768px) and (max-width: 992px) {
    .hideMediaQuery{display:none !important;}
}

这是我的课程，我正在尝试将其应用于：

 <div class="large-12 columns ProductDropdown left">
     <p class="hideMediaQuery">RACES</p>
     <label>
         <p>TESTEST</p>
     </label>       
 </div>

有人知道它为什么不起作用？我把它放在页面顶部的样式标签中进行测试，然后才把它放在样式表中这是原因吗？

任何建议都会有所帮助。

Answer 1

如果您的css课程编写如下：

@media only screen and (min-width: 768px) and (max-width: 992px) {
    .hide-for-text{display:none !important;}
}

.hide-for-text{display:block !important;}

...媒体查询中的代码将被覆盖，因此无效。

<强> DEMO 1

媒体查询通常应放在CSS文件的底部以克服此问题。

(WORKING) DEMO 2

媒体查询CSS不起作用

1 个答案: