Css 媒体查询 - 与 Bootstrap 3 冲突

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

在 699 像素之前一切正常。未应用第三个媒体查询并且不显示 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 {

    }
}