可视化大屏幕的适配方法-vw/vh

时间：2025-03-28 12:30:56

vw和vh适配方案

屏幕视口宽度 = 100vw，屏幕视口高度 = 100vh

       vw和vh也是css中标准的单位，和px,rem, %一样 vw和vh适配方案，按照设计稿的尺寸，将px按比例计算转为vw和vh

       此时运用sass封装一个处理函数，自动计算单位很方便

首先vw和vh的换算公式如下

 假如设计稿宽高为 1920px = 100vw 
               1080px = 100vh
    这样一来，以一个宽300px和200px的div来说，其作所占的宽高，以vw和vh为单位，计算方式如下:
    vwDiv = (300px / 1920px ) * 100vw
    vhDiv = (200px / 1080px ) * 100vh

一 下载sass
 

npm i sass -D

二 使用

1.在src/style下新建一个文件,定义好设计稿的宽度和高度两个变量

2.使用scss内置的``函数，定义两个`vw`和`vh`的计算函数

3.传入具体的像素值，其帮我们自动计算出vw和vh的值

 

//使用scss的math函数，/documentation/breaking-changes/slash-div
@use "sass:math"; 
 
 
//默认设计稿的宽度
$designWidth:1920;
//默认设计稿的高度
$designHeight:1080;
 
 
//px转为vw的函数
@function vw($px) {
  @return ($px , $designWidth) * 100vw;
}
 
//px转为vh的函数
@function vh($px) {  
  @return ($px , $designHeight) * 100vh;

三 路径配置

(在vite中的使用)

const path = require('path')
 
function resolve(dir) {
  return (__dirname, dir)
}
 
 
 
={
	publicPath: '', 
	configureWebpack: {
	  name: "app name",
	  resolve: {
	    alias: {
	      '@': resolve('src')
	    }
	  }
	},
	  css: {
        preprocessorOptions: {
            scss: {
                // 全局 SCSS
                additionalData: '@import "@/assets/scss/";'
                // ;不可省略否则会报错
            }
        }
    }
}

相关文章