<link type="text/css" rel="stylesheet" media="only screen and (max-device-width: 480px)" href="/assets/css/phone.css" />
<link type="text/css" rel="stylesheet" media="only screen and (min-device-width: 768px)" href="/assets/css/tablet.css" />
以上是我的條件CSS，它加載在一個手機樣式表中，另一個用於平板電腦，但是如何在計算機上查看時使用平板電腦樣式表？有條件的CSS和媒體查詢
只是一個明顯的答案，真的，但媒體查詢是只有限制該樣式表在平板電腦上使用的東西。
刪除該媒體查詢將打開它以便在桌面（以及任何其他適用的設備）上使用，同時牢記CSS特殊性的常規規則;後來聲明的樣式否決了早先聲明的樣式;所以如果你想平板樣式來覆蓋正常的桌面CSS文件，你真的必須聲明它/導入它/後來在文檔中鏈接它。仍然在head，我想象，但在其他人想要覆蓋。
還值得記住的是，當然對於智能手機，但我不確定平板電腦，他們可能有自定義GUI元素，其中包括表單元素。因此，桌面到平板電腦的翻譯（甚至是開發目的）可能並不像您或我們所希望的那樣無縫。
我不明白你的意思，我知道它不應該做，但我需要爲此完成任務。我需要一個允許使用手機的媒體查詢，以及允許使用平板電腦和臺式機的媒體查詢，我該怎麼辦？ – panthro 2012-04-22 17:33:42
爲什麼要使用允許「max-device-width」（可能爲（1），> [2560px]（http://en.wikipedia.org/wiki/Apple_Thunderbolt_Display#27.22_Thunderbolt_Display_model）的媒體查詢？您計劃使用此媒體查詢排除*什麼設備？如果您不排除任何內容或特別指定某些內容，則沒有理由使用媒體查詢。 *（1）*我沒有想過它，但我確信有*更大的像素密度顯示器，我只是想不到一個，我的頭頂。 – 2012-04-22 17:42:24
我應該首先問這個問題，但是：您認爲媒體查詢（或他們的移除）可能是解決方案，您面臨什麼問題？ – 2012-04-22 17:48:18
你的代碼應該已經臺式機相當多的工作，爲媒體查詢「（最小的設備寬度：768px）」是一切與寬度大於768px更大：平板電腦，臺式機，擺在設備等（當然，這是假設瀏覽器支持媒體查詢可言，這並不會是真實往往比你的願望。）
這麼說，我看到四個可能出現的問題：
首先，一些手機將自己置於「手持式」類別而不是類別「屏幕」，因此「僅屏幕...」將不匹配，並且根本不會將CSS發送到設備。一種可能的解決方案是指定「僅全部...」。 （這也迴避了打印時根本沒有任何CSS的問題。）
其次，爲了獲得最佳性能，您可能希望將所有CSS和媒體查詢放在一個文件中（使用@media ... [查詢] ... {CSS語句;}塊），而不是在HTML語句中指定媒體查詢，因此具有多個CSS文件。每個CSS文件（包括那些被媒體查詢禁用的文件）都會被下載;這可能需要大量的網絡帶寬。
第三，根本不歸類的不可避免的設備沒有「後備」。大多數情況下，每個網頁都應該包含一個CSS塊或一個< link ...語句，但不提供媒體查詢以提供默認/後備CSS，則其他CSS應該構建在CSS之上或覆蓋它。
第四，以像素爲單位的設備尺寸常常被非常高密度的顯示器或新的「視口」嚴重扭曲。因此，根據您的測試，一些智能手機似乎會成爲平板電腦。設備像素密度可以適應您的邏輯。 「視口」可以並且應該由「元」語句來控制，因爲通常的默認設置會使其「工作」，無論如何，通常不會正確處理更智能的響應式佈局。
（另一種可選擇的方法缺乏對媒體的質疑，媒體查詢可變性的支持，密度問題，請參閱http://www.ckollars.org/alternative-to-media-queries.html）
你的平板電腦css文件應該是工作在桌面上也提供了臺式機的最小寬度爲768px。你的HTML上有其他樣式表嗎？ – bfavaretto 2012-04-22 17:37:50
沒有其他樣式表 – panthro 2012-04-22 17:40:10