【踩坑】vue中使用媒体查询方法和不生效问题总结

在vue中是不能直接使用@media的，我们必须结合less或者sass来使用它

一、安装依赖项

只要你安装了sass就行。

npm install sass-loader node-sass --save-dev

二、@/assets/scss/media.scss

这一步，自己创建一个scss文件，这路径不用跟我一样，自己改就行。

@media screen and (min-width:1400px) {
    .time_comparison_wrap{
        margin-top: 80px;
        .wrap_title {
            text-align: center;
            font-size: 16px;
            margin: 10px 0;
            font-weight: 700;
          }
    }
    .time_comparison_title {
        text-align: center;
        margin-bottom: 20px;
        font-size: 20px;  
        margin-top: 5;
      }
  }

三、把scss文件引入到main.js文件内。

import "@/assets/scss/media.scss"

如果以上三部做完测试发现媒体查询不生效，那么基本是以下几种情况，排查一遍错误看看：

错误一：在html结构文件里必须引入代码

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

width=device-width, initial-scale=1.0 这两个比较重要
width=device-width 是指可视化宽度
initial-scale=1.0 是指缩放比例

错误二：格式书写错误and后面必须有空格例如下面代码

@media screen and (min-width:1400px) {}

错误三：样式冲突；@media查询代码的样式被后面的css所覆盖

错误四：css本身出了问题导致css不生效（若前四项错误都确定不存在，多半问题就出在这）

div{display:flex;}/*那么div所有的display效果都将无法生效*/

例如块元素浮动导致父级元素没有高度；此时给父元素加背景颜色发现没有生效，实际上是css导致的错误，而没有显示。
例如css选择的优先级也会导致对其中一种生效另外一种不生效，等等css错误导致的问题也非常多，就不一 一列举了。