1つのメディアクエリで最小幅と最大幅を組み合わせる方法

Question

このメディアクエリは期待通りに機能していません。

私がしたいことは、ウィンドウが544px未満の場合は要素を非表示にし、767px以上の場合は非表示にします。したがって、ウィンドウが544〜767ピクセルの間のみ表示されます。

@media (max-width: 544px) and (min-width: 767px) { 
    .show-sm-only { 
     display: none !important; 
    } 
} 

これは別々に動作するようですが、一緒には動作しないようです。

どうすればよいですか？

Answer 1

あなたは1に2つのメディアクエリを組み合わせることができ、このように：

@media (max-width: 544px), (min-width: 767px) { 
.show-sm-only { 
    display: none !important; 
} 
} 

EDITをこれにより、スクリーン上の.show-sm-onlyが（最大幅）544pxより小さく、スクリーン上で（最小幅）767pxよりも大きくなります。

Answer 2

あなたがこれを望むなら、あなたのルールは間違った方法です。今は、（最大幅）544pxより小さくなければならないと言っていますが、（最小幅）767pxよりも大きくなければ不可能です。彼らがどのように他の方法ラウンドであるか下記を参照してください。

EDITコメントごとに。 （代わりに、状況に不可能であるand、の）orを行うには、カンマで区切る：

@media (max-width: 544px), (min-width: 767px) { 
    .show-sm-only { 
     display: none !important; 
    } 
} 

Answer 3

両方の条件が満たされているときに適用されるメディアクエリ（ここで探していると思います）を使用する場合は、別のandを使用してください。ここではデフォルトでは表示されず、544〜767ピクセルの間のみ表示されます。

.my-element { 
    display: none; 

    @media (min-width: 544px) and (max-width: 767px) { 
    display: block; 
    } 
}