響應式CSS - 多個文件只有一個工作

-1

我正在努力使我當前的設計響應。我開始使用@media screen...，但設計中的任何內容都不會改變。我試圖使用html, div, p, a, li, td { -webkit-text-size-adjust: none; }來查看這是否至少可以幫助字體更改大小（我正在使用em），但沒有任何更改。然後我切換到<link type="text/css"...。我目前在我的HTML文檔中鏈接了3個媒體查詢文件，並使用了HTML5/CSS3。響應式CSS - 多個文件只有一個工作

我的問題是：爲什麼文檔只引用第一個文件？我拿出了核心樣式表，除了直接使用目標表格外，其他都沒有使用，只是使用第一個樣式表而已，但沒有。字體沒有調整大小。容器不會調整大小。圖像不會調整大小或刪除。只有第一個樣式表被引用 - 其他的被忽略。

這是我目前的鏈接的樣式表：

<link type="text/css" rel="stylesheet" media="only screen and (min-device-width: 1280px)" href="scripts/css/style.css" /> 

<link type="text/css" rel="stylesheet" media="only screen and (max-device-width: 800px)" href="scripts/css/style800.css" /> 

<link type="text/css" rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="scripts/css/style1024.css" />

編輯：樣式也從一個到另一個改變，但風格本身並沒有改變。這就像1280樣式表覆蓋所有其他樣式。

來源

2012-05-10 Alina

你只是調整您的瀏覽器窗口？您的媒體查詢正在尋找設備寬度。您可以嘗試將它們更改爲最小寬度和最大寬度。 –

我目前正在Screenfly上運行它，以便在移動設備和不同的桌面尺寸上看到它。它唯一引用的是1280樣式表。編輯：Grillz，我剛剛試過你的建議。仍然只引用第一個樣式表。 – Alina

也許你正在尋找最大寬度，而不是最大設備寬度？

前者用於顯示區域，如瀏覽器，後者是實際設備區域。

此外，你想把最小的一個（800px在你的情況）在最後。

試試這個：

<link rel="stylesheet" media="only screen and (min-device-width: 1280px)" href="scripts/css/style.css" /> 
<link rel="stylesheet" media="only screen and (max-width: 1024px)" href="scripts/css/style1024.css" /> 
<link rel="stylesheet" media="only screen and (max-width: 800px)" href="scripts/css/style800.css" />

來源

2012-05-10 19:46:51 Sammy

絕對要使用最小寬度/最大寬度，因爲在編寫本文時，這些是由respond.js支持的唯一的。 –

那麼，什麼時候在移動設備上查看。最小寬度仍然適用於那裏？ – Alina

是的，它也適用於那裏。 – Sammy

你如何調試它們？嘗試調整瀏覽器的大小，這些應該可以工作。此外，我真的不建議使用800像素，因爲iPad也會落入它，你更好使用767.

來源

2012-05-10 18:59:53

我使用Firebug進行調試。我知道iPad會在800px下中斷。這只是現在測試。我已將它設置爲768，但隨後我將其更改爲800，以便對尺寸更改進行單獨測試。說到調試。它似乎切換到style800.css，但沒有任何樣式會改變。我在帖子中更好地闡明瞭這一點。 – Alina

你可以在chrome/firefox中打開它並調整你的網絡瀏覽器。像cssgrid.net –

你將不得不將其設置爲767和768. –

響應式CSS - 多個文件只有一個工作

回答

相關問題