媒体查询冲突

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)

三维Tab in landscape和iPad

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