媒体查询：避免继承？

我有一个网站，当前的css为桌面体验进行了优化。我正在使用IwebKit5在Iphone css上提供更好的用户体验。

我正在使用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被加载，所以我试图找到一个避免这种情况的方法。有什么选择添加以避免这种行为？

谢谢！

来源

2011-04-01 Farid

我相信你正在接近这个错误的方式。

包括desktop.css第一个，并且让它被无条件包含。

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

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

来源

2011-04-01 22:46:38 thirtydot

谢谢，但在这种情况下，我有一个问题，当我想添加一个专门为iPhone版本的HTML元素。如果我将它设置为desktop.css中的“display：none”和mobile.css中的“display：inline”，它似乎不起作用... – Farid 2011-04-04 10:00:30

如果您首先包含桌面CSS，然后手机CSS，而你在桌面CSS中有'#myDiv {display：none}'，而在手机CSS中有'#myDiv {display：inline}'，它会*工作。如果没有，那么你做的其他事情就不对了。也许你想'display：block'而不是'display：inline'？ “'它似乎不起作用”是什么意思？ – thirtydot 2011-04-04 11:17:51

内容仍然隐藏......无论如何，你是对的，它通过设置显示属性来阻止。非常感谢！ – Farid 2011-04-04 19:55:39

媒体查询：避免继承？

回答

相关问题