🌟必要配置

👉初始化

<div id="app">
</div>
 <style scoped lang="scss">
    #app {
      width: 100%;
      height: 100%;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
     }
    </style>

页面若出现滚动条，是因为body中默认添加了margin:8px，所以只需要考虑将margin设置为0即可
在Html标签样式中添加

html {
  margin: 0;
}

添加后没有效果，原因可能是项目根目录自带index. html文件，找到他💢在符合地方添加上方样式即可

👉选择适配屏幕的方法

方法一（使用scss）

1. 引入scss
2. 创建scss文件

创建util.scss文件
//内容
// 默认宽
$designWidth: 1920;
// 默认高
$designHeight: 1080;

// px 转为 vw 的函数
@function vw($px) {
  @return $px / $designWidth * 100vw;
}

// px 转为 vh 的函数
@function vh($px) {
 @return $px, $designHeight * 100vh;
}

👇组件中只要是涉及到宽、高、字体、边框等等都修改成下方类似代码👇

width: vw(200);
height: vh(200);
border: vh(1) solid red;
font-size: vh(20);
margin-left: vw(1234);
margin-top: vh(11123);

😎大屏配置功能选择

👉大屏背景照片

一般大屏中最大的背景照片都是放在body元素当中，其原因是可以确保整个页面背景都会被覆盖到，当然如果是其他照片，肯定还是放在div元素当中

html,body {
 margin: 0;    //这个是之前添加的
 background: url( //这里填写自己大屏主背景照片//  ) no-repeat;
 background-size: cover;
 background-attachment: fixed;
}

👉独立div背景照片

 这部分是在页面当中需要添加照片时使用

background-image: url( //照片路径 );
background-repeat: no-repeat;
background-size: contain;   
height: 200px;

👉左中右自适应布局

方法一：采用vw，vh解决