html - 如何在移动设备上禁用 css 规则

Question

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

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

我在帖子中使用它来将文本环绕在图像周围，如下所示:

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

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

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

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

@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;}

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;
   }

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

.leftfloat {
  float: none;
}

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