大屏开发适配方案（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