ipad - 在 CSS for iPad 中使用媒体查询

Question

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

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

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

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

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

最好的方法是什么？

Answer 1

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

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

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

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