css - 媒体查询冲突

Question

我正在尝试让我的网站在 2 台设备上响应

1. 三星标签 (600 x 1024)
2. iPad (768 x 1024)

使用以下媒体查询

@media only screen and (min-device-width : 600px) and (max-device-width : 1024px) and (orientation : portrait){  }

和

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait){  }

但是当我在三星标签上打开我的网站时，它应用了 iPad 的媒体查询样式

我能做些什么呢？

Answer 1

您可能希望避免媒体查询重叠。不要考虑哪个设备，而是哪个屏幕尺寸。一个目标为 600-767 像素，另一个目标为 768-1024，如下所示：

三星 Tab 纵向

@media only screen and (min-device-width : 600px) and (max-device-width : 767px)

三星 Tab 横屏和 iPad

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px)