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

Question

我在WordPress的CSS文件中创建了一个类。

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

我在文章中使用它来让文本环绕图片，就像这样：

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

这个功能在电脑和移动设备上都可以正常运行。然而，我希望在移动设备上禁用此浮动。所以我做了以下操作：

在模板中已经定义了@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;}

- tariqqqqqify

---

class后面的空格怎么办？应该把 class ="leftfloat" 改为 class="leftfloat"。 - enapupe

清除和浮动是不同的东西。清除适用于浮动对象旁边的对象，使它们不对齐。这完全不同于尝试取消浮动对象。 - Dustin Poissant

另一个问题是，当你缩小浏览器时，你的代码是否在桌面上工作？如果是这样，那就说明这是一个浏览器兼容性问题（autoprefixer 可能可以解决），而不是你的代码有问题。 - Dustin Poissant

尝试使用@media (max-width:1020px){....}，删除screen and。 - pablito.aven

我在清除浏览器缓存并将Cloudflare设置为开发模式后，在我的手机上多次检查了很多次。但是现在过了一个小时，我再次检查，它现在可以工作了。另外，我正在http://mobiletest.me上进行测试，它一直显示缓存版本。 - tariqqqqqify

Answer 1

您的完整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;
   }

目前，由于所有的媒体查询都是基于 max-width 的，因此移动端会继承你原始类中的 float: left。要在移动设备上设置 float: none，需要将所有内容反转（例如）：

.leftfloat {
  float: none;
}

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

- Karl Dawson

---

好的，我没注意到他们使用了 max-width 而不是 min-width，那就是错误所在。 - Dustin Poissant

没错，我也是移动优先CSS的坚定支持者，向上媒体查询比反过来要容易得多！ - David Wilkinson

Answer 2

您可以将移动设备中的子元素属性设置为inherit，如下所示：

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

- Zeinab