vue-cli3实现屏幕自适应（两步搞定）

项目演示代码

<template>
    <div class="big">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3" style="width:1920px;background: skyblue;"></div>
    </div>
</template>

<script>

    export default {
        name: 'test',
        components: {}
    }
</script>
<style>
    * {
        margin: 0;
        padding: 0;
    }
</style>
<style scoped>
    .big {
        width: 100vw;
        height: 100vh;
        background: yellowgreen;
    }

    .big div {
        height: 100px;
    }

    .big img {
        width: 710px;
        height: 400px;
    }

    .box1 {
        width: 960px;
        background: tomato;
    }

    .box2 {
        width: 1920px;
        background-color: darkred;
    }
</style>

第一步:安装postcss-px-to-viewport

npm install --save postcss-px-to-viewport

第二步：启动项目(重启)

npm run serve

效果展示

1. 标准分辨率（1920 * 1200）
   
2. 默认分辨率（1440 * 900）
   3.其他分辨率（1024 * 640）
   

• 参考资料
  • vue-cli2自适应参考:https://www.jianshu.com/p/a7c4ff4ed14c
  • cli3:https://www.cnblogs.com/liuXiaoDi/p/13188052.html