桌面和iPad横屏的混合媒体查询

Question

我正在尝试设置一个媒体查询，该媒体查询将在视口宽度为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) 但都没有起作用。

什么是秘密配方？

谢谢，

ty

- Ty Morton

Answer 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..."

- Ty Morton