css3 @media不起作用的原因

發布時間：2020-11-19 10:20:13 來源：億速云閱讀：808 作者：小新欄目：web開發

這篇文章主要介紹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不起作用的原因的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！

向AI問一下細節

91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本