關(guān)于vue中媒體查詢不起效的原因總結(jié)

更新時(shí)間：2022年09月19日 08:34:43 作者：女程序媛的修煉筆記

這篇文章主要介紹了關(guān)于vue中媒體查詢不起效的原因總結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

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
深入理解vue.js中的v-if和v-show
這篇文章主要給大家深入的介紹了關(guān)于vue.js中v-if和v-show的相關(guān)資料，文中詳細(xì)介紹兩者的共同點(diǎn)和區(qū)別，通過圖文介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起看看吧。
2017-06-06
基于Vue實(shí)現(xiàn)簡(jiǎn)單的貪食蛇游戲
貪食蛇是一個(gè)非常經(jīng)典的游戲,?在游戲中,?玩家操控一條細(xì)長(zhǎng)的直線,?它會(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)方式示例詳解
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)步驟
本文主要介紹了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路徑拼接顯示問題
這篇文章主要介紹了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