大屏开发适配方案(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这样的屏幕设计的,他们的宽高比其实都是一致的,在其他宽高比屏上可能还有要优化的地方。希望这套方案能帮到看官老爷们,让你们早五分钟下班。

你可能感兴趣的:(vue.js,css,前端开发,css,前端,sass)