如何在移动设备上禁用 CSS 规则答案

【问题标题】：How to disable css rules on mobile devices如何在移动设备上禁用 CSS 规则
【发布时间】：2016-05-14 10:48:43
【问题描述】：

我在 wordpress css 文件中创建了一个类

.leftfloat{ float:left; padding-right:10px; }

我在帖子中使用它在图像周围环绕文字，如下所示：

<div class ="leftfloat" > image code or ad code </leftfloat>

它适用于 PC 和移动设备。但是，我想在移动设备中禁用此浮动。所以我这样做了：

模板中已经定义了@media，我只是添加了.leftfloat {float: none;}

但是当我检查它时，它并没有在移动设备上禁用浮动。

@media screen and (max-width: 860px) {
        .leftfloat {float: none;}
}
@media screen and (max-width: 1020px) {
        .leftfloat {float: none;} }

@media screen and (max-width: 767px) {
        .leftfloat {float: none;}
}
@media screen and (max-width: 620px) {
        .leftfloat {float: none;} }

@media screen and (max-width: 420px) {
         .leftfloat {float: none;}

【问题讨论】：

您是否检查过您的浏览器是否禁用了缓存。
尝试将float:none 更改为clear:both。我认为浮动是由主要样式设置的，而不是被媒体查询覆盖
class 后面的那个空格呢？ class ="leftfloat" 应该是 class="leftfloat"
清除和浮动是不同的东西。清除应用于浮动对象旁边的对象，以使它们不对齐。这与试图取消浮动对象完全不同
另一个问题...当您缩小浏览器时，您的代码是否可以在桌面上运行？如果是这样，则说明它是浏览器兼容性问题（自动前缀可能可以修复），而不是您的代码问题。

标签： html css wordpress media-queries

【解决方案1】：

您可以将移动设备中孩子的属性设置为继承。像这样：

 @media screen and (max-width: 420px) {
       .leftfloat {
         float: inherit;
       }

【讨论】：

【解决方案2】：

您的完整 CSS 如下所示：

.leftfloat{
  float:left;
  padding-right:10px;
}
   @media screen and (max-width: 860px) {
   .leftfloat {
     float: none;
   }
 }

 @media screen and (max-width: 1020px) {
   .leftfloat {
     float: none;
   }
 }

 @media screen and (max-width: 767px) {
   .leftfloat {
     float: none;
   }
 }

 @media screen and (max-width: 620px) {
   .leftfloat {
     float: none;
   }
 }

 @media screen and (max-width: 420px) {
   .leftfloat {
     float: none;
   }

就目前而言，移动设备从您的原始类中获取float: left，因为媒体查询都是max-width。要将float: none 设置为“移动”大小，您需要反转所有内容，（例如）

.leftfloat {
  float: none;
}

@media screen and (min-width: 420px) {
    .leftfloat {
      float: left;
    }
}

【讨论】：

好电话，我没有注意到他们有max-width 而不是min-width。那是错误
是的，我也是移动优先 CSS 的大力倡导者，向上媒体查询比反过来容易得多！