媒體查詢media不生效的原因及解決
更新時間：2024年10月17日 09:57:50 作者：Dragonfly Fly
媒體查詢@media常見的不生效原因包括格式書寫錯誤,例如and后必須有空格；樣式?jīng)_突,后面的CSS會覆蓋前面的；CSS本身存在問題,比如塊元素浮動導(dǎo)致父級元素?zé)o高度而背景顏色不顯示；漏掉了meta屬性中的viewport屬性,正確書寫和排列CSS代碼
媒體查詢@media不生效的原因
1.格式書寫錯誤
and后面必須有空格
@media screen and (max-width:500px){ }2.樣式?jīng)_突
@media查詢帶的css寫在后面
@media查詢的css寫在前面會被后面的css所覆蓋。
p {
background-color:lightgreen;
}
@media screen and (max-width: 1280px) and (max-height: 800px){
p {
background-color:skyblue;
}
}3.css本身出了問題導(dǎo)致css不生效
注意：
- 這是一種很常見的錯誤，例如塊元素浮動導(dǎo)致父級元素沒有高度；
- 此時給父元素加背景顏色發(fā)現(xiàn)沒有生效，實際上是css導(dǎo)致的錯誤，而沒有顯示。
4.漏掉了meta屬性viewport屬性
<meta name="viewport" content="width=device-width, initial-scale=1" />
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue3?+?Three.js實現(xiàn)自定義3D模型加載與交互實戰(zhàn)全流程
Three.js是一個用于創(chuàng)建3D圖形的JavaScript庫,它基于WebGL技術(shù),并提供了一系列的工具和API,這篇文章主要介紹了Vue3?+?Three.js實現(xiàn)自定義3D模型加載與交互實戰(zhàn)的相關(guān)資料,需要的朋友可以參考下2025-12-12
Vue項目localhost:8080無法訪問此網(wǎng)站，拒絕了我們的連接請求的解決方案
前端頁面使用的是vue,vue項目啟動成功,沒有任何報錯,服務(wù)控制臺已出現(xiàn)APP訪問地址,點擊訪問地址出現(xiàn)無法訪問此網(wǎng)站,拒絕了我們的連接請求,所以本文給大家介紹了Vue項目localhost:8080無法訪問此網(wǎng)站,拒絕了我們的連接請求的解決方案,需要的朋友可以參考下2024-12-12
Vue 和React都是當(dāng)前非常流行的前端框架,它們都可以用來構(gòu)建單頁面應(yīng)用(SPA)和響應(yīng)式的用戶界面,這篇文章主要介紹了前端面試手撕代碼之純HTML、Vue和React組件的相關(guān)資料,需要的朋友可以參考下2026-02-02
這篇文章主要介紹了Vue Promise的axios請求封裝詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了vue2.0項目集成Cesium的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
vue項目中做編輯功能傳遞數(shù)據(jù)時遇到問題的解決方法
這篇文章主要介紹了vue項目中做編輯功能傳遞數(shù)據(jù)時遇到問題的解決方法，vue父組件向子組件傳遞數(shù)據(jù)的問題，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
vue+echarts動態(tài)更新數(shù)據(jù)及數(shù)據(jù)變化重新渲染方式
這篇文章主要介紹了vue+echarts動態(tài)更新數(shù)據(jù)及數(shù)據(jù)變化重新渲染方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06
本篇文章主要介紹了使用vue-cli編寫vue插件的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-02
vue中腳手架的使用詳解(@vue-cli、@vue/cli)
文章介紹了VueCLI的2.x和5.x版本,重點推薦使用5.x,詳細描述了安裝步驟和在Vue中使用axios的三種形式,最后總結(jié)了手動安裝Vue-router的經(jīng)驗2026-05-05
這篇文章主要介紹了Vue常用的修飾符及應(yīng)用場景解讀，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10