css3 @media怎麼不起作用？是什麼原因？

css3 media不起作用的原因：1、HTML meta標籤中沒有設定加上viewport屬性；2、樣式衝突，@media查詢程式碼的樣式被後面的css所覆蓋；3、格式書寫出現錯誤，mediah語句的and後面必須有空格。

本教學操作環境：windows10、css3，本文適用於所有品牌的電腦。

相關推薦：《CSS影片教學》

在網頁製作中，利用@media screen實現網頁版面的自適應，搭配不同存取裝置。只要在CSS中加入@media screen屬性，針對不同裝置的寬度進行編寫CCS樣式，根據瀏覽器寬度判斷判斷樣式檔案並輸出不同的寬度值。

但有時設定@media媒體查詢後，發現不起作用，這是什麼原因？怎麼解決？下面這篇文章跟大家介紹一下。

css3 @media不起作用的可能原因

#不要慌呢，慢慢分析。

首先確認是不是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){
/*这只是一个示例*/
}

更多程式相關知識，請造訪：程式設計影片！ ！

以上是css3 @media怎麼不起作用？是什麼原因？的詳細內容。更多資訊請關注PHP中文網其他相關文章！