Q

可以在2 CSS媒體查詢定義重疊

2011-09-18 47 views 1 likes

1

我定義多個CSS媒體查詢爲不同vieqport或設備寬度...可以在2 CSS媒體查詢定義重疊

所以我的問題是可以2 CSS媒體查詢定義塊重疊，或者只有第一個比賽得到應用。它是如何工作的？

什麼是正確的方法來申請多個設備..我的意思是定義的順序？

2011-09-18 testndtv

A

回答

2

您可以在逗號分隔的列表中組合多個媒體查詢;如果列表中的任何媒體查詢爲真，則應用關聯樣式工作表。這相當於一個邏輯「或」操作。

https://developer.mozilla.org/en/CSS/Media_queries

所以

這是一個合乎邏輯的，相當於「或」操作

使它看起來像只有一個匹配應用。

http://reference.sitepoint.com/css/mediaqueries似乎也證實了這一點。

如果這是真的（並且它未經我測試），那麼我會創建一個通用樣式表來提供所有常見樣式，而不管媒體查詢是否匹配，然後爲每個目標設備提供獨立於設備的樣式表。

2011-09-18 17:29:46

+0

Thx很多..但我的問題是，如果我有我的css多個@media語句不同的最小寬度，是否有任何可能性，這些塊中的2個得到應用或只有1將被應用..pls提供任何示例.. – testndtv

+1

根據我提供的文檔，只能應用一個。但未經測試。 –

+0

剛纔誰低估了這個答案......你能解釋一下爲什麼嗎？我不介意如果它有擔保會被低估，但我想知道爲什麼。我不想在未來犯同樣的錯誤。 –

0

這很奇怪。如果你寫：

<link media="screen and (max-width: 1250px)" href="/css/small.css" type="text/css" rel="stylesheet" /> 
<link media="screen and (max-height: 850px)" href="/css/small.css" type="text/css" rel="stylesheet" />

它的行爲像一個XOR（有2個樣式表）。如果兩個條件都滿足（寬度< 1250和高度< 850），則不應用樣式表。但是，如果你寫：

<link media="screen and (max-width: 1250px), screen and (max-height: 850px)" href="/css/small.css" type="text/css" rel="stylesheet" />

它工作正常。所以逗號是一切的解決方案。

2012-02-10 15:09:11

相關問題