媒體查詢media不生效的原因及解決
更新時間：2024年10月17日 09:57:50 作者：Dragonfly Fly
媒體查詢@media常見的不生效原因包括格式書寫錯誤,例如and后必須有空格；樣式?jīng)_突,后面的CSS會覆蓋前面的；CSS本身存在問題,比如塊元素浮動導(dǎ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)文章
本篇文章主要介紹了Vue引入遠程JS文件，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04
Vue表單校驗規(guī)則（rules）是一種用于驗證表單數(shù)據(jù)的對象,它通常用于Vue.js框架中的表單組件中,可以在表單提交前進行數(shù)據(jù)驗證,這篇文章主要給大家介紹了關(guān)于Vue.js?rules校驗規(guī)則的相關(guān)資料,需要的朋友可以參考下2024-02-02
今天小編就為大家分享一篇vue.js與后臺數(shù)據(jù)交互的實例講解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
vue3之所以受廣大袁友的喜歡，優(yōu)點必不可少呀，比如：可以監(jiān)聽動態(tài)新增的屬性；可以監(jiān)聽刪除的屬性 ；可以監(jiān)聽數(shù)組的索引和 length 屬性；下面文章小編就來向大家介紹vue3，感興趣的小伙伴不要錯過奧2021-09-09
Vue使用sign-canvas實現(xiàn)在線手寫簽名的實例
sign-canvas?一個基于?canvas?開發(fā),封裝于?Vue?組件的通用手寫簽名板(電子簽名板),支持?pc?端和移動端，本文給大家分享Vue使用sign-canvas實現(xiàn)在線手寫簽名，感興趣的朋友一起看看吧2022-05-05
Vue中傳遞自定義參數(shù)到后端、后端獲取數(shù)據(jù)并使用Map接收參數(shù)
有些傳遞的參數(shù)是直接拼接到URL地址欄中的、但是為了統(tǒng)一管理、不能將傳遞的參數(shù)直接拼接到地址欄中，接下來通過本文給大家介紹Vue中傳遞自定義參數(shù)到后端、后端獲取數(shù)據(jù)并使用Map接收參數(shù)，感興趣的朋友一起看看吧2022-10-10
Vite結(jié)合whistle實現(xiàn)一勞永逸開發(fā)環(huán)境代理方案
這篇文章主要為大家介紹了Vite結(jié)合whistle實現(xiàn)一勞永逸開發(fā)環(huán)境代理方案，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
這篇文章主要為大家詳細介紹了vue.draggable實現(xiàn)表格拖拽排序效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-12-12
這篇文章主要為大家介紹了vue3 axios 實現(xiàn)自動化api配置詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
本文介紹了VUE中組件的基本使用以及個人對VUE組件的理解,希望能幫助到大家2019-02-02