前端vue2下使用media query 媒体查询报错问题

唯一Chat

发布于 2022-11-16 16:47:32

6040

发布于 2022-11-16 16:47:32

文章被收录于专栏：陶士涵的菜地陶士涵的菜地

在前端vue2项目下，如果直接像普通css那样使用meidia query，是不起作用的

需要安装sass和sass-loader

在package.json中指定一下依赖，一定要注意版本，经过我的测试我现在这个版本是不报错的，其他的新版本是各种报错

    "sass": "^1.56.0",
    "sass-loader": "^7.3.1",

{
  "name": "default",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "axios": "^1.1.3",
    "core-js": "^2.6.5",
    "element-ui": "^2.15.10",
    "sass": "^1.56.0",
    "sass-loader": "^7.3.1",
    "vue": "^2.6.10",
    "vue-router": "^3.6.5"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.8.0",
    "@vue/cli-service": "^3.8.0",
    "vue-template-compiler": "^2.6.10"
  }
}

npm install一下

然后 npm run serve

vue文件中使用案例

<style lang="scss">
    .chatCenter {
        background: #fff;
        max-width: 900px;
        margin: 0 auto;
        box-shadow: 2px 2px 6px rgb(0 0 0 / 30%);
        border-top: none;
        overflow: hidden;
        @media screen and (min-width: 900px){
            max-height: 780px;
            box-shadow: 0 2px 8px rgb(0 0 0 / 15%);
            border-radius: 8px;
        }
    }
    .visitorBody {
        height: 100vh;
        background-color: #eef0f6;
        @media screen and (min-width: 900px){
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }

</style>

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2022-11-06，如有侵权请联系 cloudcommunity@tencent.com 删除

sass