css - 如何为移动设备和网站进行两个不同的媒体查询

Question

我正在为网站使用以下媒体查询。当窗口展开和收缩时，它工作正常。但是对于手机，虽然在chrome dev tool的手机模拟器上，布局看起来很完美。但是同样的媒体查询在我的实际手机上中断了(尽管移动和网络的设计/布局相同)。如何进行两个不同的媒体查询？

@media only screen and (min-width: 10px) and (max-width: 319px) {
}

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

@media screen and (min-width: 481px) {
}

@media screen and (min-width: 641px) {
}

@media screen and (min-width: 768px) {
}

@media screen and (min-width: 961px) {
}

编辑:iphone 6。我喝这么多啤酒的原因是因为我使用的是背景图片。当窗口尺寸变小时，图像(没有背景重复)在底部显示空白区域。为了解决这个问题，必须设置许多断点。

Answer 1

使用最大宽度而不是最小宽度。因为我认为你所有的媒体查询都代表屏幕分辨率大于 320 678 等，并且由于只执行桌面查询。