vue中媒體查詢不起效原因總結

vue中 用less或scss都可以使用媒體查詢不生效無非以下幾種錯誤，若還有，歡迎在下方評論補充

錯誤一：在html結構文件裏必須引入代碼

<meta name="viewport" content="user-scalable=0,width=device-width, initial-scale=1.0">

width=device-width 是指可視化寬度
initial-scale=1.0 是指縮放比例

錯誤二：格式書寫錯誤and後面必須有空格例如下面代碼

錯誤三：樣式衝突；@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號的區間是不會生效的，必須還要寫一個例如2號框裏的最大寬度或最小寬度查詢區間纔行。

錯誤五：css本身出了問題導致css不生效（若前五項錯誤都確定不存在，多半問題就出在這）

div{display:flex;}/*那麼div所有的display效果都將無法生效*/

例如塊元素浮動導致父級元素沒有高度；此時給父元素加背景顏色發現沒有生效，實際上是css導致的錯誤，而沒有顯示。
例如css選擇的優先級也會導致對其中一種生效另外一種不生效，等等css錯誤導致的問題也非常多，就不一 一列舉了。