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

学习吖

已于 2022-10-10 16:59:05 修改

阅读量3.4k

点赞数 3

分类专栏：可视化大屏幕的适配文章标签： html css 前端

于 2022-10-10 16:55:59 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_68531033/article/details/127246729

版权

可视化大屏幕的适配专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种基于vw和vh单位的响应式布局方案，通过SASS封装计算函数实现从px到vw/vh单位的自动转换，适用于不同屏幕尺寸的设计稿。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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下新建一个use.scss文件,定义好设计稿的宽度和高度两个变量

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

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

use.scss

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

三路径配置

(在vite中的使用)vue.config.ts

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