css - 媒体查询在 chrome 中不起作用，但在 iphone 上起作用

Question

我在样式表的底部添加了这个

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {

body {
 background: #000 !important;

 }

}

它在 iphone 上运行良好，但我想通过调整浏览器大小在 ff 或 chrome 中进行测试，它确实添加了样式。我怎样才能让它工作？

Answer 1

去除那个-device

@media only screen 
and (min-width : 320px) 
and (max-width : 480px) {

body {
 background: #000 !important;

 }

}

min-width max-width测量浏览器窗口的宽度。min-device-width max-device-width测量永远不会改变的设备（即您的显示器）的宽度