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){  }

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

我能为此做什么？

Answer 1

您可能希望避免在媒体查询中出现重叠。不要根据哪种设备来考虑它，而是根据哪种屏幕尺寸来考虑。一个定位 600-767 像素，另一个定位 768-1024 像素，如下所示:

纵向的三星标签

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

Samsung Tab 横屏，iPad 横屏

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