如何为移动设备和网站制作两种不同的媒体查询

Question

我正在使用以下媒体查询网站。当窗口扩展和收缩时，它工作正常。但对于手机来说，虽然在chrome dev工具的手机模拟器上，布局看起来很完美。但同样的媒体查询打破了我的实际手机（尽管移动和网络具有相同的设计/布局）。如何进行两种不同的媒体查询？

@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

使用max-width而不是min-width。因为我认为所有媒体查询都代表屏幕分辨率大于320 678等，并且由于只执行桌面查询。