html界面实现大屏适配

问题：界面用纯html+css+js实现，项目部署需要部署在不同比例的屏幕上，如何来实现屏幕的适配？

在找解决办法的时候，有rem、vw、scale

rem：发现只能根据屏幕宽度适配

scale: 根据设计稿的比例进行缩放，会产生白边，客户不喜欢

vw：最后决定用vw、vh，因为这两个是相对于视口进行适配

思路：用vw、vh就需要进行像素转换（px->vw/vh）,然而css文件并不能对像素进行转换（除非手动转换），所以我们需要用到sass的math函数，html文件是不能直接引入sass文件，所以中间需要插件（live sass compiler）对sass文件进行转换，转换的css文件引入html

步骤1：安装插件live sass compiler

步骤2：新建一个scss（注意是scss不是sass），我直接把math函数写道scss里面了

index.scss

@use "sass:math";
// 默认设计稿的宽度
$designWidth: 1920;
// 默认设计稿的高度
$designHeight: 1080;

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

// px 转为 vh 的函数
@function vh($px) {
  @return math.div($px, $designHeight) * 100vh;
}
//下面直接写css样式

然后在vscode的右下方会出现watch sass 点击对scss文件进行监听，只要scss文件改变，就是对其重新编译，css文件就会相应更新，记得把css文件引入html

步骤3：math函数用法

@use "sass:math";
// 默认设计稿的宽度
$designWidth: 1920;
// 默认设计稿的高度
$designHeight: 1080;

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

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

.left {
  width: vw(433);//里面的宽度就是设计稿里元素的宽度
  height: vh(933);
  position: relative;

  background-image: url("../images/page2/bg_left.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}