大屏开发适配方案（vw/vh）

背景

公司需要开发一个用于4k大屏展示的项目，所以给到的UI视觉稿也是参照4k屏进行了设计（单位为px），而我们开发所用的屏幕多为1080p/2k屏，为了让大家开发时不用关注适配问题，我设计了这套基于vw/vh的适配方案

技术栈

vue + sass

思路

视觉稿给到的宽高值都是基于4k屏，所以本地开发时不能直接使用，需要经过某种计算转换，为了逻辑清晰，我们可以考虑设计三个函数来分别将宽/高/字体的px转为vw/vh。
以宽为例，视觉稿上的某元素宽为1000px，而4k屏的宽度为3840px，那么1000/3840*100vw就是我们需要的实际宽度值

代码

• sass代码，代码中的宽高可以根据自身需求变更，font函数与vw其实是一样的，只是为了提升开发体验所以单独抽出。

// utils.scss
// 使用scss的math函数，https://sass-lang.com/documentation/breaking-changes/slash-div

@use "sass:math";

//默认设计稿的宽度
$designWidth: 3840;
//默认设计稿的高度
$designHeight: 2160;
//最小字体
$minFontSize: 12;

//px转为vw的函数

@function vw($px) {
  @return math.div($px, $designWidth) * 100vw;
}

//px转为vh的函数

@function vh($px) {
  @return math.div($px, $designHeight) * 100vh;
}

//字体转vw
@function font($px) {
  @return math.div($px, $designWidth) * 100vw;
}

• 通过vue.config.js挂载到全局

module.exports = {
  ...
  css: {
    loaderOptions: {
      sass: {
        prependData: `@import "@/style/utils.scss";`
      }
    }
  }
}

• 使用示例，入参直接使用设计稿中的值即可，所见即所得

.demo {
  width: vw(500);
  height: vh(400);
  font-size: font(30)
}

结语

这套方案是为了1080p/2k/4k这样的屏幕设计的，他们的宽高比其实都是一致的，在其他宽高比屏上可能还有要优化的地方。希望这套方案能帮到看官老爷们，让你们早五分钟下班。