Question

我有一个display:none的div（移动优先方法）：

  #my_div {
     display: none;
     color: red;
     font-family: Arial, Helvetica, sans-serif;
     font-size: 14px;
  }

我使用一些媒体查询（在css之后）用一些填充和字体大小显示这个div：

 /* Between 600px and 649px */
 @media (min-width: 600px) and (max-width: 649px) {
    #my_div {
       display: inline-block;
       padding-top: 26px;
       padding-left: 15px;
       font-size: 18px;
    }
 }

 /* Between 650px and 699px */
 @media (min-width:650px) and (max-width:699px) {
   #my_div {
      display: inline-block;
      padding-top: 24px;
      padding-left: 20px;
      font-size: 20px;
   }
}

/* Between 700px and 914px */
@media (min-width: 700px) and (max-width: 914px) {
   #my_div {
      display: inline-block;
      padding-top: 22px;
      padding-left: 35px;
      font-size: 22px;
   }
}

一切正常，直到699px。未应用第三个媒体查询，并且不显示div。

如果我使用以下媒体查询，则会显示div，但不会应用@media (min-width: 700px)。 @media (min-width:650px)已应用：

 @media (min-width: 600px) {
    #my_div {
       display: inline-block;
       padding-top: 26px;
       padding-left: 15px;
       font-size: 18px;
    }
 }

 @media (min-width:650px) {
   #my_div {
      display: inline-block;
      padding-top: 24px;
      padding-left: 20px;
      font-size: 20px;
   }
}

@media (min-width: 700px) {
   #my_div {
      display: inline-block;
      padding-top: 22px;
      padding-left: 35px;
      font-size: 22px;
   }
}

通过使用chrome检查器，我可以看到超过700px它应用了规则：

  #my_div {
     display: none;
     ...
  }

修改

我又添加了一个媒体查询

 #my_div {
     display: none;
     color: red;
     font-family: Arial, Helvetica, sans-serif;
     font-size: 14px;
  }

 @media (min-width: 600px) {
    #my_div {
       display: inline-block;
       padding-top: 26px;
       padding-left: 15px;
       font-size: 18px;
    }
 }

 @media (min-width:650px) {
   #my_div {
      display: inline-block;
      padding-top: 24px;
      padding-left: 20px;
      font-size: 20px;
   }
}

@media (min-width: 768px) {
   #my_div {
      display: none; /* it doesn't work, also with !important */
   }
}

@media (min-width: 915px) {
   #my_div {
     display: inline-block;
     padding-top: 22px;
     padding-left: 35px;
     font-size: 22px;
  }
}

唯一未应用的规则是@media (min-width: 768px)。

在我的CSS中，没有其他规则会影响my_div div的显示。我使用的是Bootstrap 3。

编辑2

我将Bootstrap hidden-sm类添加到div my_div：

 <div id="my_div" class="hidden-sm"><strong>My slogan</strong></div>

这样，div不会显示在768px和991px之间，但我会再次从915px显示它。

解

我更新了AngelosCharalis的JSfiddle，通过复制并粘贴我的代码，我找到了一个不可见的点字符。现在它有效。

Answer 1

首先，您必须从最高像素开始。

@media (max-width: 914px) {
    #myId {

    }
}
@media (max-width: 699px) {
    #myId {

    }
}
@media (max-width: 649px) {
    #myId {

    }
}
@media (max-width: 599px) {
    #myId {

    }
}

Css媒体查询 - 与Bootstrap 3冲突

1 个答案: