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

【问题标题】：Media queries - targeting specific devices together媒体查询 - 同时针对特定设备
【发布时间】：2013-05-06 05:27:11
【问题描述】：

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

我有一组共享样式，用于小型网络窗口、任意旋转的移动设备和仅纵向的 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)

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

【问题讨论】：

你能举个例子吗？或建议为什么？手机/智能手机和平板电脑是不同的设备。 iPad 也可能难以匹配，因为不同代的屏幕分辨率不同。
简短回答：客户要求。基本上，他们希望他们的移动站点适用于手机，并且整个站点在 iPad 上看起来不错并且在横向上运行良好，但不是纵向，因此他们想要纵向视图上的移动站点版本。不能将查询与这两个变量结合起来吗？目前我的临时工作是完全复制样式，这是愚蠢的。

标签： iphone ipad mobile mobile-safari media-queries

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

【讨论】：