大屏适配方案（vw、vh）

2024-07-11 21:41| 来源: 网络整理| 查看: 265

开发大屏主要是两方面的工作：

大屏之关键-前期的自适应适配根据 ui 稿绘制图表，调细节方案实现方式优点缺点 vw vh 1.按照设计稿的尺寸，将px按比例计算转为vw和vh 1.可以动态计算图表的宽高，字体等，灵活性较高 2.当屏幕比例跟 ui 稿不一致时，不会出现两边留白情况 1.每个图表都需要单独做字体、间距、位移的适配，比较麻烦

实现思路

按照设计稿的尺寸，将px按比例计算转为vw和vh，转换公式如下

假设设计稿尺寸为 1920*1080（做之前一定问清楚 ui 设计稿的尺寸）即：网页宽度=1920px 网页高度=1080px 我们都知道网页宽度=100vw 网页宽度=100vh 所以，在 1920px*1080px 的屏幕分辨率下 1920px = 100vw 1080px = 100vh 这样一来，以一个宽 300px 和 200px 的 div 来说，其所占的宽高，以 vw 和 vh 为单位，计算方式如下: vwDiv = (300px / 1920px ) * 100vw vhDiv = (200px / 1080px ) * 100vh 所以，就在 1920*1080 的屏幕分辨率下，计算出了单个 div 的宽高当屏幕放大或者缩小时，div 还是以 vw 和 vh 作为宽高的，就会自动适应不同分辨率的屏幕 css 方案 - sass

util.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; }

在 .vue 中使用

export default{ name: "Box", } @import '@/assets/scss/util.scss'; /* 直接使用 vw 和 vh 函数，将像素值传进去，得到的就是具体的 vw vh 单位 */ .box{ width: vw(300); height: vh(100); font-size: vh(16); background-color: black; margin-left: vw(10); margin-top: vh(10); border: vh(2) solid red; } 屏幕变化后，图表自动调整

这种使用方式有个弊端，就是屏幕尺寸发生变化后，需要手动刷新一下才能完成自适应调整

为了解决这个问题，你需要在各个图表中监听页面尺寸变化，重新调整图表，在 vue 项目中，最好封装个 resize 的指令，在各图表中就只要使用该指令就可以了。

封装 directive // 在directives目录下创建resizeObserver.js文件 // 监听元素大小变化的指令 const map = new WeakMap() const ob = new ResizeObserver((entries) => { for (const entry of entries) { // 获取dom元素的回调 const handler = map.get(entry.target) //存在回调函数 if (handler) { // 将监听的值给回调函数 handler({ width: entry.borderBoxSize[0].inlineSize, height: entry.borderBoxSize[0].blockSize }) } } }) export const Resize = { mounted(el, binding) { //将d

【本文地址】

大屏适配方案（vw、vh）

大屏适配方案（vw、vh）

今日新闻

推荐新闻