媒体查询不在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测量永不改变的设备（即显示器）的宽度