關(guān)于vue中媒體查詢不起效的原因總結(jié)
vue媒體查詢不起效的原因
vue中 用less或scss都可以使用媒體查詢不生效無非以下幾種錯(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的過程中，@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效果都將無法生效*/
例如塊元素浮動(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實(shí)現(xiàn)移動(dòng)端原生小球滑塊
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)移動(dòng)端原生小球滑塊，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要給大家深入的介紹了關(guān)于vue.js中v-if和v-show的相關(guān)資料，文中詳細(xì)介紹兩者的共同點(diǎn)和區(qū)別，通過圖文介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起看看吧。2017-06-06
貪食蛇是一個(gè)非常經(jīng)典的游戲,?在游戲中,?玩家操控一條細(xì)長的直線,?它會(huì)不停前進(jìn),?玩家只能操控蛇的頭部朝向,?一路拾起觸碰到之物。本文將用Vue實(shí)現(xiàn)這一游戲，感興趣的可以嘗試一下2022-04-04
Vue.js實(shí)現(xiàn)一個(gè)todo-list的上移下移刪除功能
這篇文章主要介紹了Vue.js實(shí)現(xiàn)一個(gè)todo-list的上移下移刪除功能,需要的朋友可以參考下2017-06-06
vue3+ts+vite使用el-table表格渲染記錄重復(fù)情況
這篇文章主要給大家介紹了關(guān)于vue3+ts+vite使用el-table表格渲染記錄重復(fù)情況的相關(guān)資料,我們可以通過合并渲染、數(shù)據(jù)緩存或虛擬化等技術(shù)來減少重復(fù)渲染的次數(shù),文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
vue深拷貝的三種實(shí)現(xiàn)方式：1、通過遞歸方式實(shí)現(xiàn)深拷貝；2、JSON.parse(JSON.stringify(obj))；3、jQuery的extend方法實(shí)現(xiàn)深拷貝,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧2023-11-11
本文主要介紹了vue3中使用jsx的實(shí)現(xiàn)步驟，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
Vue報(bào)錯(cuò)ERR_OSSL_EVP_UNSUPPORTED解決方法
Vue項(xiàng)目啟動(dòng)時(shí)報(bào)錯(cuò)ERR_OSSL_EVP_UNSUPPORTED,本文主要介紹了Vue報(bào)錯(cuò)ERR_OSSL_EVP_UNSUPPORTED解決方法,具有一定的參考價(jià)值,感興趣的可以了解一下2024-08-08
這篇文章主要介紹了Vue傳遞參數(shù)不在URL路徑拼接顯示問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
淺析Vue3中Excel下載模板并導(dǎo)入數(shù)據(jù)功能的實(shí)現(xiàn)
這篇文章主要為大家詳細(xì)介紹了Vue3中的Excel數(shù)據(jù)管理,即下載模板并導(dǎo)入數(shù)據(jù)功能的實(shí)現(xiàn),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以參考一下2024-05-05