這篇文章主要介紹css3 @media不起作用的原因，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

十載的甘德網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對設(shè)計(jì)、前端、開發(fā)、售后、文案、推廣等六對一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。成都營銷網(wǎng)站建設(shè)的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整甘德建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。成都創(chuàng)新互聯(lián)從事“甘德網(wǎng)站設(shè)計(jì)”,“甘德網(wǎng)站推廣”以來，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

css3 media不起作用的原因：1、HTML meta標(biāo)簽中沒有設(shè)置加viewport屬性；2、樣式?jīng)_突，@media查詢代碼的樣式被后面的css所覆蓋；3、格式書寫出現(xiàn)錯(cuò)誤，mediah語句的and后面必須有空格。

在網(wǎng)頁制作中，利用@media screen實(shí)現(xiàn)網(wǎng)頁布局的自適應(yīng)，匹配不同訪問設(shè)備。只需在CSS中添加@media screen屬性，針對不同設(shè)備的寬度進(jìn)行編寫CCS樣式，根據(jù)瀏覽器寬度判斷判斷樣式文件并輸出不同的寬度值。

但有時(shí)設(shè)置@media媒體查詢后，發(fā)現(xiàn)不起作用，這是什么原因？怎么解決？下面本篇文章給大家介紹一下。

css3 @media不起作用的可能原因

不要慌呢，慢慢分析。

首先確認(rèn)是不是css本身的問題，而不是媒體查詢沒有生效。例如：

div{display:flex;}/*那么div所有的display效果都將無法生效*/

第一種錯(cuò)誤：格式書寫錯(cuò)誤,and后面必須有空格

例如下面代碼：

@media screen and (max-width:500px){ }

第二種錯(cuò)誤：樣式?jīng)_突；@media查詢代碼的樣式被后面的css所覆蓋

注意：建議在書寫css的過程中，@media查詢帶的css寫在后面，以免這樣避免被前面的css覆蓋。

第三種錯(cuò)誤：css本身出了問題導(dǎo)致css不生效

注意：這是一種很常見的錯(cuò)誤，例如塊元素浮動(dòng)導(dǎo)致父級元素沒有高度；此時(shí)給父元素加背景顏色發(fā)現(xiàn)沒有生效，實(shí)際上是css導(dǎo)致的錯(cuò)誤，而沒有顯示。

例如css選擇的優(yōu)先級也會導(dǎo)致對其中一種生效另外一種不生效，等等css錯(cuò)誤導(dǎo)致的問題也非常多，就不一 一列舉了。

第四種錯(cuò)誤：meta屬性viewport屬性，這個(gè)雖然基本常識，應(yīng)該也會有人漏掉。

第五種錯(cuò)誤：括號中的內(nèi)容內(nèi)容不能寫結(jié)束符“;”，以及其它錯(cuò)誤。

解決辦法：

有很多解決方法，但是建議可以是用css排除法，使用css注釋掉一部分；

當(dāng)然瀏覽器也是一個(gè)很好的查看代碼解決問題的方法。

@media screen and (max-width:200px){
/*這只是一個(gè)示例*/
}

以上是css3 @media不起作用的原因的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！