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

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: {// 全局 SCSSadditionalData: '@import "@/assets/scss/ViewPort.scss";'// ;不可省略否则会报错}}}
}

可视化大屏幕的适配方法-vw/vh相关推荐

vw/vh：移动适配之vw/vh(使用方法)
使用vw/vh布局,可以实现视口宽度不同,网页元素宽高等比缩放效果,比rem的优势在于,在代码中直接写vw/vh就能实现移动适配效果,不用引入js文件,比rem更简单,但有兼容问题,目前大厂已经转型到 ...
一次搞懂数据大屏适配方案 (vw vh、rem、scale)
大厂技术高级前端 Node进阶点击上方程序员成长指北,关注公众号回复1,加入高级Node交流群前言当接到可视化大屏需求时,你是否会有以下疑问
移动端与大屏幕自适应适配方案
vue3+cli4.x+lib-flexible+postcss-pxtorem的移动端与大屏幕适配方案一.安装并配置相应插件 1.安装lib-flexible与postcss-pxtorem 2. ...
使用VUE实现可视化大屏的适配思路总结（文末送vue版可视化大屏源码）
页面布局在拿到设计图后,通常会先通过设计图的布局来思考代码的设计,这也是开始着手写代码前必须要进行的一步,在项目中,我曾遇到,在一张大屏图开发到一半的时候介入,和另一个前端一起进行开发,结果由于她将 ...
前端可视化大屏设置全屏模式方法
目录 1.效果举例: 2.场景 3.实现步骤 1.效果举例: 点击tab栏进入全屏按esc或者屏幕中间图标退出全屏,通过返回按钮返回项目 2.场景相当于手动按F11的效果.经典的应用场景是制作 ...
数据可视化大屏幕的功能和亮点
Smartbi数据大屏幕适用于大型的管理机构,信息量高度集中,相比仪表盘来说弱化交互性,强化炫酷的展示效果.Smartbi支持非常灵活的布局.样式和图形效果,并且设计.上线速度极快,远超各种开发技术实 ...
用flask+echarts打造一个数据可视化大屏幕
文章目录 1. big_screen项目说明 2. big_screen项目文件布局 3. 四大模块核心代码分析 3.1 数据准备模块 3.2 flask网页服务模块 3.3 网页视图模块 a. 网页 ...
python 可视化大屏幕_如何用python搭建可视化看板？
可视化看板是指大屏驾驶舱 dashboard这些吗,如果是,那不建议用python来做,不专业,目前没有见过哪个项目上的大屏是用python做的,它不是万能的大屏的制作一般是这样的先根据用户的需 ...
可视化大屏项目适配 vue
适配效果: 选择的适配方案设计稿是1920px flexible.js 把屏幕分为 10 等份 ( flexible.js 中可修改 ,默认为 10 ) 0. 新建 vue 项目,项目目录如下 1. ...

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

vw和vh适配方案

一下载sass

二使用

可视化大屏幕的适配方法-vw/vh相关推荐

最新文章

热门文章

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

vw和vh适配方案

一 下载sass

二 使用

可视化大屏幕的适配方法-vw/vh相关推荐

最新文章

热门文章

一下载sass

二使用