大屏自适应操作

已于 2024-02-05 09:13:42 修改
阅读量616 收藏 7
点赞数 7
文章标签： 前端
于 2024-01-30 09:51:02 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_43799793/article/details/135926009
版权

大屏自适应操作

1、通过scale全局缩放来进行
获取缩放比例，实际屏幕窗口的宽度 / 1920
2、在设计图（蓝湖）中，设置宽度为1920，来重新获得相关尺寸
3、根据重新设置后的尺寸去开发

在这里插入图片描述

在这里插入图片描述

大屏自适应解决方案
虎康的博客
05-22 296
当我们在看视频时，会发现把窗口缩小，视频也会缩小但处于窗口正中间，等比例的进行了缩放，横纵比例还是保持在 16：9 的这么一个状态，这个状态是如何做。可以实现，但不够优雅，继而继续写出了以下，添加了防抖，添加了过渡，添加了居中展示。这里浅浅自己封装一下进行使用，
前端大屏自适应踩过的坑
kgjfk的博客
09-20 748
自适应大屏项目踩过的坑
大屏幕自适应
batmannolove的博客
12-30 581
【前端】【业务逻辑】 数据大屏自适应方案汇总
qq_59344127的博客
04-22 709
利用 CSS 的 Flexbox 或 Grid 布局，根据屏幕尺寸自动调整元素排列，实现真正的响应式设计。）进行布局，结合 JavaScript 动态设置根元素的字体大小，实现页面元素随屏幕尺寸变化而自适应。通过 CSS 的媒体查询，根据不同的屏幕尺寸应用不同的样式，实现页面的自适应。需要兼容多种屏幕尺寸和设备的项目，如响应式网站或管理后台。-在极端屏幕尺寸下，可能需要结合媒体查询进行优化。-在屏幕尺寸多样化的情况下，可能导致样式冗余。
大屏自适应
lalalademax的博客
11-22 465
vue2.0+vue.cli的大屏自适应架构搭建
PC大屏自适应
qq_36278896的博客
05-15 2055
PC大屏自适应 通常做法 一般pc端页面布局会取中间一定的宽度，高度自适应。而可视化大屏需要在不同分辨率的显示屏上铺满整个屏幕，这就需要根据屏幕不同分辨率设置不同的宽高也就是自适应布局。在此向小伙伴们推荐一个rem布局方案，rem是相对于根元素中的font-size计算得出。 post-css 插件可以帮助你做这个计算，效果就是你不用算了，图上是多少长度，你写多少就行了，这个 rem 的转换由插件完成。 rem布局 此布局基于框架vue npm i @njleonzhang/postcss-px-to-re
Vue大屏自适应
梨子社区
03-15 2154
【代码】Vue大屏自适应。
Vue3使用css特性transform实现可视化大屏自适应解决方案
07-29
操作：代码注释写的很详细，很容易就明白，对vue3不熟悉的小伙伴更加友好，将...PS：对于使用transform实现可视化大屏自适应方案，需要注意在缩放过程中内容区域的图片像素是否达标，否则会出现图片缩放后模糊的情况。
前端开发Vue中rem布局与大屏自适应组件使用指南：实现高效响应式设计与性能优化
最新发布
05-25
内容概要：本文详细介绍了在Vue项目中实现rem布局与大屏自适应的方法。首先，阐述了rem布局的基础使用方法，包括项目初始化配置，如安装依赖、配置postcss以及引入自适应脚本。其次，讲解了如何在组件中使用rem进行...
【前端大屏实战1】Vue+Echarts -- 大屏简介初体验 =＞ 大屏自适应缩放解决方案 =＞ 使用transform:scale =＞ 组件化抽离ScaleBox=＞【两分钟实现大屏宽高等比例】
热门推荐
Sabrina_cc的博客
04-25 1万+
【前端大屏实战1】Vue+Echarts -- 大屏简介初体验 =＞ 大屏自适应缩放解决方案 => 使用transform:scale => 组件化抽离ScaleBox=>【两分钟实现大屏自适应】
前端开发必备：数据可视化大屏自适应与缩放解决方案
资源摘要信息:"在数据可视化大屏项目中实现自适应布局以满足不同分辨率需求是前端开发者必须掌握的技能之一。本文将介绍如何利用CSS中...开发者需要熟练操作这些配置文件，以完成整个大屏自适应项目的开发和部署工作。
数据大屏自适应
weixin_44208404的博客
02-19 233
使用rem进行自适应需要注意单位，采用scale实现完全自适应，但是仅限于。
大屏页面自适应
weixin_42670357的博客
10-24 1136
window.onresize = () => { return (() => { myfunction() })() } myfunction() function myfunction() { var bodys = document.getElementsByTagName(...
大屏项目屏幕自适应
qq_34858032的博客
09-16 450
项目场景： 大屏可视化项目屏幕自适应方案1 需求描述： 大屏项目难免遇到不同尺寸展示页面，此方案可设置不同尺寸的页面 解决方案： 核心方案是给你的页面设置不同尺寸宽高，然后根据当前浏览器页面的宽高设置缩放，从而来实现不同尺寸的缩放 截图展示： 查看项目地址：https://xiaoli18093193677.github.io/screenAdaptation/dist/ ...
大屏可视化自适应屏幕
zgh0611的博客
09-25 548
使用transform：scale（缩放实现）,页面设置为高1080，宽为1920，然后使用document.documentElement.clientWidth和document.documentElement.clientHeight获取到当前页面的大小，根据设置的宽高计算出百分比进行缩放。2.2、如果是单页面自适应就在自适应页面引入，全局的话在app.vue页面引入。可以使用autofit.js插件实现自适应。
可视化大屏自适应
weixin_47521196的博客
08-01 2625
可视化大屏自适应问题解决方案
大屏 超宽屏自适应最优解决方案（transform:scale）
Z_Gleng的博客
03-01 3934
① 大屏使用rem 耗时 而且对浏览器最小字体不支持，② 使用transform:scale可以节省百分之九十工作量③ 好处不多说：看一篇文章 学习一下 咱们再来实战！优点：前期可以直接写页面，后期直接加上组件就行了，不用适配，直接用px写缺点：在和设定比例不一样的情况下，会被缩小展示，上下左右两边会存在一定的空白。
pc端自适应大屏
weixin_40112036的博客
10-10 538
1.npm i lib-flexible-computer -S //根节点会根据页面视口变化而变化font-size大小。3.yarn add postcss-px2rem-exclude -D： 将代码中px自动转化成对应的rem的一个插件。安装好了之后还需要在项目的入口文件 main.js 里引入 lib-flexible-computer。2.yarn add px2rem-loader -D：px 转 rem。在vue.config.js中下方代码。
大屏自适应/适配方案【详解】（echarts自适配、rem、flexible.js、vscode中px2rem插件自动计算rem）
朝阳39的博客
08-30 1万+
大屏自适应
vue实现大屏自适应组件
02-27
### 创建响应式大屏自适应组件 为了使Vue应用中的组件能够根据不同的屏幕尺寸自动调整大小，在开发过程中需考虑多个方面，包括但不限于使用灵活的布局方案、CSS媒体查询以及JavaScript逻辑来动态改变样式属性。 #### 使用Vuetify实现基础布局 采用Vuetify作为UI框架能简化许多工作流程。Vuetify内置了栅格系统(grid system)，这使得创建响应式的布局变得简单得多。通过设置`v-container`, `v-row`, 和`v-col`标签及其相应的属性，可以轻松定义页面的基础结构[^1]。 ```html <v-container fluid> <v-row> <v-col cols="12" md="6"> <!-- 左侧内容 --> </v-col> <v-col cols="12" md="6"> <!-- 右侧内容 --> </v-col> </v-row> </v-container> ``` #### 动态调整元素尺寸 对于更复杂的场景，比如整个数据大屏的整体缩放，则可能需要借助于JavaScript来进行更加精细的操作。一种常见的方式是在mounted钩子函数里初始化监听器，并在window resize事件触发时重新计算并更新DOM节点的高度宽度等参数[^4]。 ```javascript export default { mounted() { window.addEventListener('resize', this.handleResize); this.handleResize(); }, beforeDestroy() { window.removeEventListener('resize', this.handleResize); }, methods: { handleResize() { const screen = document.getElementById('screen'); let widthRatio = window.innerWidth / designWidth; let heightRatio = window.innerHeight / designHeight; let ratio = Math.min(widthRatio, heightRatio); screen.style.transform = `scale(${ratio})`; screen.style.left = `${(window.innerWidth - designWidth * ratio) / 2}px`; screen.style.top = `${(window.innerHeight - designHeight * ratio) / 2}px`; } } } ``` 这里假设存在一个预设的设计稿尺寸(`designWidth`, `designHeight`)，实际项目中可以根据具体需求设定这些值。 #### 结合Vuex管理状态 当涉及到多处依赖相同的数据源或配置项时，引入Vuex可以帮助更好地管理和共享全局变量。例如，可以在store模块中保存当前视口的实际比例因子(ratio)，从而让其他地方也能方便地获取到这个信息用于渲染或其他目的[^3]。 ```javascript // store/index.js import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); export default new Vuex.Store({ state: { scaleRatio: 1, }, mutations: { setScaleRatio(state, payload){ state.scaleRatio = payload; } } }); ``` 随后，在组件内部可以通过mapState辅助函数映射state字段至computed选项下： ```javascript computed: mapState(['scaleRatio']), ``` 这样做的好处是可以保持代码的一致性和可维护性，同时也便于后续扩展功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值