媒体查询冲突答案

【问题标题】：media Queries conflict媒体查询冲突
【发布时间】：2013-05-05 01:14:33
【问题描述】：

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

使用以下媒体查询

@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 的媒体查询样式

我可以为此做些什么？

【问题讨论】：

使用：github.com/tarunsharma20/initiator
使用媒体查询来定位特定设备是一种可怕的 RWD 方式（请参阅：designshack.net/articles/css/… 和 blog.cloudfour.com/…）

【解决方案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)

【讨论】：