css - CSS 中的媒体查询在设备之间不起作用

Question

我使用 Chrome 中的响应式 Web 设计器插件来检查定位320 x 480、480 x 320、600 x 800、800 x 600、768 x 1024 和 1024 x 768。

我用过:

@media screen and (max-width: 480px){ my code }
@media screen and (max-width: 320px){ my code }

...使这些网站响应的结构。

当我检查这些布局时，它在浏览器中运行良好。当我拿到像 Samsung Galaxy Core Prime 这样的真实设备时，它的显示效果很好。但是，在横向模式下，它没有正确对齐。

此外，当我从另一个具有 360 宽度视口(viewport)大小屏幕的设备检查我的站点时，我为 480 编写的媒体查询不会影响它。

我希望我为 480 编写的代码适用于 320 和 480 之间的设备。

我这里做错了什么？

Answer 1

@media screen 仅适用于特定屏幕，因此某些尺寸不同的设备可能会跳过

改用这个

@media all and (max-width: 480px){ my code }
@media all and (max-width: 320px){ my code }