CSSメディアクエリ - ブートストラップ3

Question

と競合私はdisplay:none（モバイル最初のアプローチ）とのdiv要素を持っている：

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

私は、これはいくつかのパディングとフォントでDIV表示する（後にCSSで）いくつかのメディアクエリを使用 - サイズ：

/* 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までうまくいきます。 3番目のメディアクエリは適用されず、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; 
    } 
} 

私は700pxの上には、ルールを適用していますことを確認することができクロムインスペクタを使用することにより：私は1つの以上のメディアクエリー

を追加した

#my_div { 
    display: none; 
    ... 
    } 

EDIT

#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の表示に影響する他のルールはありません。 div要素が768pxと991pxの間に表示されていない。このように

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

：私はdivのmy_divにブートストラップhidden-smクラスを追加したブートストラップ3.

EDIT 2

を使用していますしかし、私は再び915pxからそれを表示するでしょう。

SOLUTIONは

私はコピーして自分のコードを貼り付けることで、AngelosCharalisによってJSfiddleを更新して、私は目に見えないドット文字を見つけました。今それは動作します。

Answer 1

まず、最も高いピクセルから開始する必要があります。

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

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

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

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

    } 
}