iphone - 媒体查询 - 同时针对特定设备

Question

我有一个加载的设备样式表来处理网站中的响应式设计，但我正在努力按照我想要的方式对几个不同的媒体查询进行分组。

我有一组共享的样式，用于小型 Web 窗口、任意旋转的移动设备和仅纵向的 iPad。

目前，除了 iPad 之外，我通过以下查询得到了所有内容：

@media all and (max-device-width: 480px), all and (max-width: 480px)

我正在使用以下代码获得 iPad 的肖像：

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

如何结合这两个媒体查询？

Answer 1

好的，对于任何有这个问题的人。

为了实现这一点，我最终使用媒体查询来加载样式表，而不是在我的样式表中嵌入媒体查询。

<link rel="stylesheet" type="text/css" media="all and (max-device-width: 480px), all and (max-width: 480px)" href="device.css" />
<link rel="stylesheet" type="text/css" media="@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait)" href="device.css" />