溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹css3 @media不起作用的原因，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
css3 media不起作用的原因：1、HTML meta標簽中沒有設置加viewport屬性；2、樣式沖突，@media查詢代碼的樣式被后面的css所覆蓋；3、格式書寫出現錯誤，mediah語句的and后面必須有空格。
在網頁制作中，利用@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不起作用的原因的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
