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

Question

假设我有一个现有的桌面 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 将被导入，否则将被忽略。

什么是最好的方法？

Answer 1

In desktop.css, can we just do a condtional import at the end..

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

但在您的情况下，如果您在开始时导入 iPad 样式，它们可能会全部被您的桌面样式覆盖。所以你最好使用另一个 <link>带有该媒体查询并指向您的 ipad.css 的元素相反:

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