Mediaquery - 最大幅の問題

Question

display：noneでhtml要素を削除したいとします。画面の幅が500ピクセル未満の場合。

@media (max-width:500px) 
 
    { 
 
    button { display:none}; 
 
    }

<button>Test</button>

問題がある画面が500pxなど

Answer 1

未満300ピクセル ないときは、ボタンが消えるこれは細かい

https://jsfiddle.net/8k2w28m6/

@media screen and (max-width:500px) 

を動作するようです

Answer 2

肉のナイフでパンを切ろうとしています。デバイスの幅が指定された幅よりも小さい場合にルールを適用する場合、ルールはの代わりにmax-widthに適用されます。修正は、次のようなものでなければなりません。

@media screen and (max-device-width:500px) 
    { 
    button { display:none}; 
    } 

<button>Test</button>