iphone - 媒体查询 : avoid inheritance?

Question

晚上好

我有一个网站，其当前的 CSS 已针对桌面体验进行了优化。我正在研究 Iphone css，使用 IwebKit5 提供更好的用户体验。

我正在使用 javascript，解析用户代理以检测要使用的 css。我正在寻找一种避免使用 javascript 的方法，并发现了媒体查询功能。

<!--[if !IE]>-->
<link type="text/css" rel="stylesheet" media="only screen and (max-device-width: 480px)" href="mobile.css"/>
<!--<![endif]-->
<link type="text/css" rel="stylesheet" href="desktop.css"/>

这是我尝试过的，它在桌面上运行良好(Iphone css 被忽略)，但在 Iphone 上我意识到 mobile.css 和 desktop.css 都被加载了，所以我试图找到一种方法来避免这种情况.要添加什么选项才能避免这种行为？

谢谢!

Answer 1

我相信您的处理方式是错误的。

包括desktop.css 首先，然后无条件地包含它。

然后，在mobile.css里面，添加/覆盖您需要的任何属性。

绝大多数desktop.css应该仍然与 iPhone 相关 - 你应该只是调整大小/长度和其他内部各种元素的小调整 mobile.css .