解決方法：1.保證media書寫格式為「@media screen and (css樣式){}」；2、檢查樣式是否衝突；3、設定meta標籤的viewport屬性；4、media後跟的括號中的內容不能寫結束符號“;”，如果有，就需要去掉。
本教學操作環境：Windows7系統、css3版，Dell G3電腦。
css3 @media不起作用原因總結
首先確認是不是css本身的問題，而不是媒體查詢沒有生效；例如
div{display:flex;}/*那么div所有的display效果都将无法生效*/外聯樣式引入css使用的src，粗心的錯誤
<link src="/css/imgpro.css" rel="stylesheet" > /*这是错误的*/ <link href="/css/imgpro.css" rel="stylesheet" >/*这是正确的*/
如果是css問題，只能具體問題具體分析。
請依照下面的幾種錯誤進行排查。
第一種錯誤：格式書寫錯誤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影片教學
以上是如何解決css3 media不起作用的問題的詳細內容。更多資訊請關注PHP中文網其他相關文章！
