桌面和 iPad 环境的混合媒体查询答案

【问题标题】：Mixed Media Queries for Desktop and iPad Landscape桌面和 iPad 环境的混合媒体查询
【发布时间】：2015-07-11 20:25:03
【问题描述】：

我正在尝试设置一个媒体查询，它将为具有 1024 像素或更大视口的桌面浏览器以及处于横向模式的 iPad 使用相同的样式表。

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

对于纵向模式的 iPad 和手机，我们将加载不同的样式表。

发生的情况是桌面显示正常，但 iPad 生成空白页，因为桌面媒体查询未被识别。但是，纵向和手机版本的媒体查询也没有注册。

我尝试了各种组合，比如 @media only screen and (min-device-width: 481px) and (max-device-height: 1024px) and (orientation:landscape), only screen and (min-width: 1024px) 但没有任何效果。

秘诀是什么？

谢谢，

【问题讨论】：

标签： ios css ipad responsive-design media-queries

【解决方案1】：

这似乎成功了：

@media only screen  and (min-width: 1024px),
@media only screen and (device-width: 768px) and (orientation: landscape)

显然，我错过了第二条规则的 @media。

现在的问题是 SASS 不会渲染它。我收到以下错误：

Syntax error: Invalid CSS after "...width: 1024px),": expected media query (e.g. print, screen, print and screen), was "@media only scr..."

【讨论】：