css3 media不起作用怎么辦

這篇文章主要介紹了css3 media不起作用怎么辦，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

css3 media不起作用的解決辦法：1、修改media書寫格式為“@media screen and (max-width:500px){ }”；2、檢查樣式沖突；3、檢查css選擇的優先級；4、修改meta屬性viewport屬性。

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" />

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

感謝你能夠認真閱讀完這篇文章，希望小編分享css3 media不起作用怎么辦內容對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，遇到問題就找億速云，詳細的解決方法等著你來學習!