如何解決css3 media不起作用的問題

解決方法：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中文網其他相關文章！