仅针对移动设备停用 CSS 类答案

【问题标题】：Deactivate a CSS class for mobile devices only仅针对移动设备停用 CSS 类
【发布时间】：2018-11-30 13:25:57
【问题描述】：

首先，对不起，我是 CSS 初学者。

我正在处理一个使用自定义主题制作的 wordpress 网站。它有这个 CSS 类，我想在网站的移动版本上停用，因为它使所有内容重叠：

.fullScreenHeight {
    content: 'viewport-units-buggyfill; height: 100vh;';
}

.fullScreenHeight {
    height: 100vh;
}

到目前为止，我已经尝试过不同的解决方案，例如：

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {.fullScreenHeight { 
    height: 100%;
}}

但它们似乎不起作用。

有什么想法吗？

非常感谢您！

【问题讨论】：

您的解决方案看起来不错。为什么要尝试将高度从100vh 更改为100%？你的 CSS 是在现有样式之后出现的吗？另外 - 检查您正在测试的设备的屏幕宽度 - 可能小于 320 像素或大于 480 像素，这意味着媒体查询不匹配...
嘿，理查德，你给了我一个主意。我在行尾添加了 !important ，现在它可以工作了。谢谢 :) 如果需要，您可以编写解决方案，我会将其标记为正确的解决方案。
您还应该将content 属性更改为空值。在某些特定情况下，有一个脚本将获取content 的值并将CSS 注入<style> 标记，以在它认为是“错误”的浏览器（即某些版本的Safari）上添加100vh 效果。
好的 Nikki，我会做的，也谢谢你！
如果您希望完全“停用”此类，为什么不使用display: none;？

标签： css wordpress

【解决方案1】：

尝试这样使用。

@media only screen and (min-width: 320px) and (max-width: 480px) {
  .classname-to-deactive{
     display: none;
  }
}

你可以给优先级类名

z-index: 9999999; 
display: block;

【讨论】：

他不想隐藏元素，他只想在移动端禁用某个类的效果。
@ThomasScheffer 我以为他想禁用类名。

【解决方案2】：

应该没那么难，试试下面的css:-

@media screen only and (max-width:800px) and (min-width:300px){
.fullScreenHeight{
height:100vh!important;
}}

你可以随意改变高度。

【讨论】：

【解决方案3】：

答案是：

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {.fullScreenHeight { 
    content: '';
    height: 100% !important;
}}

感谢大家的帮助:)

【讨论】：