CSSメディアクエリで要素を隠す

Question

CSSクラスシステムで画面サイズに応じて要素を非表示にする正しい方法は何ですか？

私の現在のアプローチは、このようなメディアクエリを使用することです：

/* From 768 to 1023 px */ 
@media (min-width: @screen-sm) and (max-width: (@screen-md - 1)) 
{ 
    .hide-sm { display: none; } 
} 

/* From 1024 to 1199 px */ 
@media (min-width: @screen-md) and (max-width: (@screen-lg - 1)) 
{ 
    .hide-md { display: none; } 
} 

問題は、画面が正確であるとき（@画面-MDは - 1）ということで広い、それは1023ピクセル、のどれもしましょう。 hide-smと.hide-md要素は非表示になります。

しかし、768から1024ピクセルの範囲を作る画面-MD @から1ピクセルを減算させない場合は、別の問題があるでしょう：.hide-SMと.hide-MD要素の両方が1024ピクセルに非表示になります画面。

例：https://codepen.io/vyprichenko/pen/ZKvGKM

Answer 1

あなたは正しい道にしているが、あなたは正しくメディアクエリを使用していないように見えます。特定のポイントまで要素を表示し要素を上げたい場合は、max-widthを使用します。特定のポイントの後に要素が表示されるようにするには、最小幅のメディアクエリが必要です。このコードを使用して、必要な結果を得ることができました：

@media(max-width:1023px){ 
     .hide-0-to-1024{ 
     display:none; 
     } 
    } 

@media (min-width: 1024px) { 
     .hide-1024-up { 
     display: none; 
     } 
}