媒體查詢：避免繼承？

我有一個網站，當前的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

媒體查詢：避免繼承？

回答

相關問題