Mediaquery - 最大宽度问题

Question

我想通过display：none删除html元素。当屏幕宽度小于500px时;

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

<button>Test</button>

问题是，当屏幕小于300像素时，按钮会消失 不是500px

Answer 1

这似乎工作正常

https://jsfiddle.net/8k2w28m6/

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

Answer 2

你正试图用肉刀切面包。您希望在设备宽度小于给定宽度的情况下应用规则，但您的规则适用于max-width而不是max-device-width。修复应该是这样的：

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

<button>Test</button>