scss+vh/vw，less+vh/vw大屏自适应方案

前言

网页自适应要是为了解决在不同分辨率下保证显示效果一致，例如文字、图片、布局等；本篇讲的是主要使用的是vh/vw方案。

方案一 scss+vh/vw

首先在工具类uitls.scss中添加scss函数，函数vh($px)接收要转化的px数值，返回值为转换后的vh单位的数值；函数vw($px)逻辑与函数vh($px)一致，只是返回值不同。

//utils.scss
@use "sass:math";
$designWidth: 1920; //设计稿宽度
$designHeight: 1080;//设计稿高度
@function vh($px) {
  @return math.div($px, $designHeight) * 100vh;
}
@function vw($px) {
  @return math.div($px, $designWidth) * 100vw;
}

然后需要在vite.config.js中作相关配置

export default defineConfig(({ mode, command }) => {
  return {
      //...其他配置
    css:{
        preprocessorOptions:{
            scss:{
                additionalData: `@import "./src/assets/styles/utils.scss";`,//根据自己的实际路径更改
            }
        }
    }
  };
});

使用

.elements{
   height:vh(90);
   width:vw(90)
}

方案二 less+vh/vw

less与scss写法有所不同，代码如下：

//utils.less
@charset "utf-8";

// 默认设计稿的宽度(根据开发UI稿更改)
@designWidth: 1920;

// 默认设计稿的高度(根据开发UI稿更改)
@designHeight: 1080;

.vw(@name, @px) {
  @{name}: (@px / @designWidth) * 100vw;
}

.vh(@name, @px) {
  @{name}: (@px / @designHeight) * 100vh;
}

.font(@px) {
  font-size: (@px / @designWidth) * 100vw;
}

在less中没有自定义函数的说法，但是提供mixin的写法，同样能实现类似scss函数的功能；在这段代码中定义了两个mixin  .vh 与 .vw，他们都接收两个参数，第一个参数为css的属性名，第二个参数为需要转换的px值。在vite.config.js中的配置同方案一。

使用

.elements{
   .vh(height,90);
   .vw(width,90)
}

需要注意的是在绘制同一个元素时vh与vw最好不要混用，例如：

//绘制一个宽高都为100px的div元素
//错误示例
div{
    height:vh(100);
    width:vw(100)
}

//正确示例
div{
    height:vh(100);
    width:vh(100)
}

我的建议是在整个项目中使用同一种单位去换算，宽屏统一使用vh（pc端，宽度比高度长），长屏统一使用vw（移动端，宽度比高度小）。