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