關(guān)于vue中媒體查詢不起效的原因總結(jié)
vue媒體查詢不起效的原因
vue中 用less或scss都可以使用媒體查詢不生效無非以下幾種錯誤
錯誤一
在html結(jié)構(gòu)文件里必須引入代碼
<meta name="viewport" content="user-scalable=0,width=device-width, initial-scale=1.0">
- width=device-width 是指可視化寬度
- initial-scale=1.0 是指縮放比例
錯誤二
格式書寫錯誤and后面必須有空格例如下面代碼
錯誤三
樣式?jīng)_突；@media查詢代碼的樣式被后面的css所覆蓋
注意：建議在書寫css的過程中，@media查詢帶的css寫在后面，以免這樣避免被前面的css覆蓋
.bg-header {
width:100%;
height:23rem;
background-size:100% 100%;
position: relative;
@media screen and (min-width: 370px) {
height: 25rem;
}
@media screen and (min-width: 300px) and (max-width: 370px) {
height: 20rem;
}
}
錯誤四
樓主所犯錯誤（不知道有沒有童鞋跟我一樣大意,吼吼吼）
如果只寫下面圖中1號的區(qū)間是不會生效的，必須還要寫一個例如2號框里的最大寬度或最小寬度查詢區(qū)間才行。
錯誤五
css本身出了問題導(dǎo)致css不生效（若前五項(xiàng)錯誤都確定不存在，多半問題就出在這）
div{display:flex;}/*那么div所有的display效果都將無法生效*/
例如塊元素浮動導(dǎo)致父級元素沒有高度；此時給父元素加背景顏色發(fā)現(xiàn)沒有生效，實(shí)際上是css導(dǎo)致的錯誤，而沒有顯示。
例如css選擇的優(yōu)先級也會導(dǎo)致對其中一種生效另外一種不生效，等等css錯誤導(dǎo)致的問題也非常多，就不一 一列舉了。
vue使用media媒體查詢
<style lang="scss">
.s {
background-color: red;
width: 100%;
height: 500px;
@media only screen and (max-width: 1200px) {
background-color: green;
}
}
</style>
css必須是scss模式
npm install sass-loader node-sass --save-dev
以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
因?yàn)轫?xiàng)目需要，近期做了一個公眾號網(wǎng)頁開發(fā)。在此期間也踩了一些坑，解決這些坑之后，準(zhǔn)備對這個項(xiàng)目進(jìn)行復(fù)盤。記錄下項(xiàng)目從開發(fā)到上線所解決的問題，并對使用vue進(jìn)行公眾號開發(fā)的步驟進(jìn)行一個總結(jié)。方便以后有問題進(jìn)行查閱。希望對你有所幫助2021-05-05
這篇文章主要介紹了vue百度地圖實(shí)現(xiàn)自定義彈框樣式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
利用vue實(shí)現(xiàn)密碼輸入框/驗(yàn)證碼輸入框
這篇文章主要為大家詳細(xì)介紹了如何利用vue實(shí)現(xiàn)密碼輸入框或驗(yàn)證碼輸入框的效果,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以參考一下2023-08-08
ElementUI?組件之Layout布局(el-row、el-col)
這篇文章主要介紹了ElementUI?組件之Layout布局(el-row、el-col),本文通過實(shí)例代碼圖文相結(jié)合給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧2024-07-07
解決el-select數(shù)據(jù)量過大的3種方案
最近做完一個小的后臺管理系統(tǒng),快上線了,發(fā)現(xiàn)一個問題,有2個select的選項(xiàng)框線上的數(shù)據(jù)量是1w+,而測試環(huán)境都是幾百的,所以導(dǎo)致頁面直接卡住了,本文給大家總結(jié)了3種方法,需要的朋友可以參考下2023-09-09
前端element-ui兩層dialog嵌套遮罩層消失的問題解決辦法
最近使用vue+elementUI做項(xiàng)目,使用過程中很多地方會用到dialog這個組件,有好幾個地方用到了dialog的嵌套,這篇文章主要給大家介紹了關(guān)于前端element-ui兩層dialog嵌套遮罩層消失的問題解決辦法,需要的朋友可以參考下2024-08-08
vue3父組件異步props傳值子組件接收不到值問題解決辦法
這篇文章主要給大家介紹了關(guān)于vue3父組件異步props傳值子組件接收不到值問題的解決辦法,需要的朋友可以參考下2024-01-01
vue?使用mescroll.js框架實(shí)現(xiàn)下拉加載和上拉刷新功能
這篇文章主要介紹了vue?使用mescroll.js框架?實(shí)現(xiàn)下拉加載和上拉刷新功能,本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-07-07
Vue使用ajax(axios)請求后臺數(shù)據(jù)的方法教程
在vue中經(jīng)常會用到數(shù)據(jù)請求,下面這篇文章主要給大家介紹了關(guān)于Vue使用ajax(axios)請求后臺數(shù)據(jù)的方法教程,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
vue3中使用props和emits并指定其類型與默認(rèn)值
props是Vue3中的一個重要概念,它允許我們將數(shù)據(jù)從父組件傳遞到子組件,下面這篇文章主要給大家介紹了關(guān)于vue3中使用props和emits并指定其類型與默認(rèn)值的相關(guān)資料,需要的朋友可以參考下2023-04-04