在 CSS for iPad 中使用媒体查询答案

【问题标题】：Use of Media Queries in CSS for iPad在 CSS for iPad 中使用媒体查询
【发布时间】：2011-08-10 07:05:45
【问题描述】：

假设我有一个现有的桌面 CSS (desktop.css)。我想包括 iPad Safari CSS。

在desktop.css中，我们可以在最后做一个条件导入吗..

@media only screen and (device-width : 768px) 
{  
@import "ipad.css"
}

在 ipad.css 中，我们将只有 iPad 相关的样式.. /* iPad 样式 */

即如果是 iPad 用户，则 ipad.css 将被导入，否则将被忽略。

最好的方法是什么？

【问题讨论】：

【解决方案1】：

在desktop.css中，我们可以在最后做一个条件导入吗..

实际上，不，@imports 必须在任何其他样式声明之前。

但在您的情况下，如果您在开始时导入 iPad 样式，它们可能都会被您的桌面样式覆盖。因此，您最好在该媒体查询中使用另一个 <link> 元素，并改为指向您的 ipad.css：

<link rel="stylesheet" media="only screen and (device-width: 768px)" href="ipad.css">

【讨论】：

@BoltClock - 为什么要使用固定宽度检查？ iPad 尺寸可能会发生变化。此外，较旧的台式机实际上可能有 768 像素的宽度。
@Moshe：当我的意思是使用<link> 而不是条件导入时，我真的不认为我需要为我的示例编写一个圣杯媒体查询，因为后者行不通 - 我只是把 OP 已经有的东西扔进去了。如果您愿意，可以对其进行编辑以添加更好的媒体查询。
如果我在 desktop.css 末尾执行条件 @import 怎么办？这可能吗？
@hmthur：是否有条件都没有关系。 @import 行必须在样式表的开头。
@BoltClock - 不用担心。 :-) 我只是指出，由于上述原因，我不想将上述查询复制并粘贴到我的 HTML 文件中。