媒体查询：避免继承？

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内各种元素的尺寸/长度以及其他此类小调整。