@media screen and 不起作用原因彙總。

首先確認是不是css本身的問題，而不是媒體查詢沒有生效；例如

div{display:flex;}/*那麼div所有的display效果都將無法生效*/

第一種錯誤：格式書寫錯誤and後面必須有空格例如下面程式碼；

@media screen and (max-width:500px){ }

第二種錯誤：樣式衝突；@media查詢程式碼的樣式被後面的css所覆蓋

注意：建議在書寫css的過程中，@media查詢帶的css寫在後面，以免這樣避免被前面的css覆蓋

第三種錯誤：css本身出了問題導致css不生效

注意：這是一種很常見的錯誤，例如塊元素浮動導致父級元素沒有高度；此時給父元素加背景顏色發現沒有生效，實際上是css導致的錯誤，而沒有顯示。

例如css選擇的優先順序也會導致對其中一種生效另外一種不生效，等等css錯誤導致的問題也非常多，就不一 一列舉了。

第四種錯誤：meta屬性viewport屬性，這個雖然基本常識，應該也會有人漏掉

<meta name="viewport" content="width=device-width, initial-scale=1" />

第五種錯誤：括號中的內容內容不能寫結束符“;”，以及其它錯誤

解決辦法：

有很多解決方法，但是建議可以是用css排除法，使用css註釋掉一部分；

當然瀏覽器也是一個很好的檢視程式碼解決問題的方法。

@media screen and (max-width:200px){
/*這只是一個示例*/
}

下面就詳細的給大家介紹一些關於[email protected]的作用。

在CSS2只有media types可用，而在CSS3則包括了media types與media feature兩主部分合稱叫做media queries，可用來判斷瀏覽器、平板、手機的寬度作相對應的處理， 語法為

@media not|only mediatype and (media feature) {
    CSS-Code;
}
 

mediatype通常以screen實用居多，media feature則以min-width或max-width實用居多。   1、media queries查詢條件的使用 Query的語法只有四項：and、or、not、only (1)、and 如果User Angent為screen且Browser寬度為 500px (含) 以上，就套用這css設定：

@media screen and (min-width:500px) {
    CSS-Code;
}

(2)、or or用法在這裡是以逗號表示 如果User Angent為screen且Browser寬度為 500px (含) 以上， 或是彩色投影機時，就套用這css設定。請注意，and優先權比or高。

@media screen and (min-width:500px) , projection and (color) {
    CSS-Code;
}

(3)、not not意思為負邏輯， 彩色螢幕不會套用 css 設定，彩色印表機會套用 css 設定

@media not screen and (color), print and (color) {
    CSS-Code;
}

換個寫法可以釐清and、or、not運算元的優先權

@media (not (screen and (color))), print and (color) {
    CSS-Code;
}

(4)、only 如果你事先知道特定的User Angent不支援你寫的CSS-Code的時候， 這時你就可以使用only來避開他，並專心讓支援你寫的CSS-Code的User Angent來執行即可。 如下意思為，具有彩色螢幕的User Angent直接使用我寫的CSS-Code(example.css)， 至於其他型態的User Angent不需判斷一概跳過。

<link rel="stylesheet" media="only screen and (color)" href="example.css" />

其結果會和沒有關鍵字「only」一樣，但判斷過程可是有差別的。

<link rel="stylesheet" media="screen and (color)" href="example.css" />