位置: IT常识 - 正文

常用的前端大屏 适配方案(常用的前端大屏软件)

编辑:rootadmin
常用的前端大屏 适配方案 方案实现方式优点缺点vm vh1.按照设计稿的尺寸,将px按比例计算转为vw和vh1.可以动态计算图表的宽高,字体等,灵活性较高 2.当屏幕比例跟 ui 稿不一致时,不会出现两边留白情况1.每个图表都需要单独做字体、间距、位移的适配,比较麻烦scale1.通过 scale 属性,根据屏幕大小,对图表进行整体的等比缩放1.代码量少,适配简单2.一次处理后不需要在各个图表中再去单独适配 3.文字,图片等大小均能自动适配1.因为是根据 ui 稿等比缩放,当大屏跟 ui 稿的比例不一样时,会出现周边留白情况2.当缩放比例过大时候,字体会有一点点模糊,就一点点3.当缩放比例过大时候,事件热区会偏移。插件v-scale-screen是使用 css 属性 transform 实现缩放效果的一个大屏自适应组件,通过 scale 进行等比例计算,达到等比例缩放的效果可以通过api调整原稿的宽高方案一:vw vh

推荐整理分享常用的前端大屏 适配方案(常用的前端大屏软件),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:前端 大屏,前端大屏解决方案,常用的前端大屏软件,前端大屏解决方案,常用的前端大屏 适配方案 原创,常用的前端大屏有哪些,常用的前端大屏手机,常用的前端大屏有哪些,内容如对您有帮助,希望把文章链接给更多的朋友!

1.当屏幕正好为16:9的时候

2.当屏幕的尺寸比例大于 16:9 (左右拉长)

3.当屏幕的尺寸比例小于 16:9 时(左右变窄或者上下拉高)

实现方法: css 方案 - sass utils.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.config.js里配置一下utils.scss的路径,就可以全局使用了 vue.config.js

module.exports = {css: {loaderOptions: {sass: {prependData: `@import "@/assets/css/utils.scss";`}}},}在 .vue 中使用<template> <div class="box"> </div></template><script>export default{ name: "Box",}</script><style lang="scss" scoped="scoped">/* 直接使用 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;}</style>

css 方案 - less

utils.less@charset "utf-8";// 默认设计稿的宽度@designWidth: 1920;// 默认设计稿的高度@designHeight: 1080;.px2vw(@name, @px) { @{name}: (@px / @designWidth) * 100vw;}.px2vh(@name, @px) { @{name}: (@px / @designHeight) * 100vh;}.px2font(@px) { font-size: (@px / @designWidth) * 100vw;}路径配置在vue.config.js里配置一下utils.less<style lang="less" scoped="scoped">/* 直接使用 vw 和 vh 函数,将像素值传进去,得到的就是具体的 vw vh单位 */.box{ .px2vw(width, 300); .px2vh(height, 100); .px2font(16); .px2vw(margin-left, 300); .px2vh(margin-top, 100); background-color: black;}</style>定义 js 样式处理函数// 定义设计稿的宽高const designWidth = 1920;const designHeight = 1080;// px转vwexport const px2vw = (_px) => { return (_px * 100.0) / designWidth + 'vw';};export const px2vh = (_px) => { return (_px * 100.0) / designHeight + 'vh';};export const px2font = (_px) => { return (_px * 100.0) / designWidth + 'vw';};

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

为了解决这个问题,你需要在各个图表中监听页面尺寸变化,重新调整图表,在 vue 项目中,也可以借助element-resize-detector,最好封装个 resize 的指令,在各图表中就只要使用该指令就可以了,毕竟作为程序员,能偷懒就偷懒。

解决方案一 1:安装 element-resize-detector

npm install element-resize-detector --save

2:封装成自定义指令使用

// directive.jsimport * as ECharts from "echarts";import elementResizeDetectorMaker from "element-resize-detector";import Vue from "vue";const HANDLER = "_vue_resize_handler";function bind(el, binding) { el[HANDLER] = binding.value ? binding.value : () => { let chart = ECharts.getInstanceByDom(el); if (!chart) { return; } chart.resize(); }; // 监听绑定的div大小变化,更新 echarts 大小 elementResizeDetectorMaker().listenTo(el, el[HANDLER]);}function unbind(el) { // window.removeEventListener("resize", el[HANDLER]); elementResizeDetectorMaker().removeListener(el, el[HANDLER]); delete el[HANDLER];}// 自定义指令:v-chart-resize 示例:v-chart-resize="fn"Vue.directive("chart-resize", { bind, unbind });常用的前端大屏 适配方案(常用的前端大屏软件)

3:main.js 中引入

import '@/directive/directive';

4:html 代码中使用

<template> <div class="linechart"> <div ref="chart" v-chart-resize class="chart"></div> </div></template>

这里要注意的是,图表中如果需要 tab 切换动态更新图表数据,在更新数据时一定不要用 echarts 的 dispose 方法先将图表移除,再重新绘制,因为 resize 指令中挂载到的图表实例还是旧的,就监听不到新的 chart 元素的 resize 了,更新数据只需要用 chart 的 setOption 方法重新设置配置项即可。

解决方案二 1.在echarts中可以echarts.init(chatDom).resize()来解决宽高的自适应问题

let chatDom = document.getElementById('main');let myChart = this.$echarts.init(chatDom);//根据父盒子的尺寸调整echarts的大小setTimeout(() => {window.addEventListener('resize', () => {this.$echarts.init(chatDom).resize();});}, 20);

2.在DataV中可以添加key来解决

<dv-water-level-pond :config="config2" :key="key" ref="pie2" />data(){ return { key: 1 } }, mounted() {this.pieOutlineFunc();}, methods: {pieOutlineFunc() {var _this = this;window.addEventListener('resize', function (e) {_this.$nextTick(() => {console.log(_this.$refs.pie2);_this.key++;});});}}

方案二:csale 通过 css 的 scale 属性,根据屏幕大小,用js监测屏幕的大小变化对图表进行整体的等比缩放,从而达到自适应效果 当屏幕的尺寸比例刚好是 16:9 时,页面能刚好全屏展示,内容占满显示器

当屏幕尺寸比例大于 16:9 时,上下左右留白,左右占满并居中,显示比例保持 16:9 当屏幕尺寸比例大于 16:9 时,页面左右留白,上下占满并居中,显示比例保持 16:9

代码 html

<template><div class="screen-root"><div class="screen" id="screen"><div class="div1"><h1>11111111111</h1></div><div class="div2"><h1>2222222222</h1></div><div class="div3"><h1>3333333333</h1></div></div></div></template>

js

<script>export default {mounted() {// 初始化自适应 ----在刚显示的时候就开始适配一次this.handleScreenAuto();// 绑定自适应函数 ---防止浏览器栏变化后不再适配window.onresize = () => this.handleScreenAuto();},deleted() {window.onresize = null;},methods: {// 数据大屏自适应函数handleScreenAuto() {const designDraftWidth = 1920; //设计稿的宽度const designDraftHeight = 1080; //设计稿的高度// 根据屏幕的变化适配的比例const scale =document.documentElement.clientWidth / document.documentElement.clientHeight <designDraftWidth / designDraftHeight? document.documentElement.clientWidth / designDraftWidth: document.documentElement.clientHeight / designDraftHeight;// 缩放比例document.querySelector('#screen').style.transform = `scale(${scale}) translate(-50%,-50%)`;return 1;}}};</script>

css

<style lang="scss" scoped>/* 除了设计稿的宽高是根据您自己的设计稿决定以外,其他复制粘贴就完事*/h1 {color: red;font-size: 50px;}.screen-root {height: 100vh;width: 100vw;.screen {display: inline-block;width: 1920px; //设计稿的宽度height: 1080px; //设计稿的高度transform-origin: 0 0;position: absolute;left: 50%;top: 50%;border: 2px solid rgb(31, 210, 145);box-sizing: border-box;display: flex;.div1 {background-color: #fff;height: 100%;text-align: center;flex: 0 1 30%;}.div2 {background-color: rgb(133, 14, 14);height: 100%;text-align: center;flex: 0 1 40%;}.div3 {background-color: rgb(61, 6, 188);height: 100%;text-align: center;flex: 0 1 30%;}}}</style>

方案三:插件v-scale-screen 它其实也是通过 scale 进行等比例计算放大和缩小的,和方案二的原理是一样的,还可以通过api调整样式,源码地址和对应的API。

使用方法: 1.vue2请使用v-scale-screen@1.0.0版本,vue3请使用v-scale-screen@2.0.0版本

npm install v-scale-screen@1.0.0 -save# oryarn add v-scale-screen

2.使用-vue2中使用插件导入,vue3以组件导入

vue2// main.jsimport VScaleScreen from 'v-scale-screen'Vue.use(VScaleScreen)组件内使用//html<v-scale-screen width="1920" height="1080" :boxStyle="boxStyle"> <div> <v-chart>....</v-chart> <v-chart>....</v-chart> <v-chart>....</v-chart> <v-chart>....</v-chart> <v-chart>....</v-chart> </div></v-scale-screen>//jsdata() {return {boxStyle: {backgroundColor: 'green'},}vue3<v-scale-screen width="1920" height="1080"> <div> <v-chart>....</v-chart> <v-chart>....</v-chart> <v-chart>....</v-chart> <v-chart>....</v-chart> <v-chart>....</v-chart> </div></v-scale-screen><script>import VScaleScreen from 'v-scale-screen'export default { components:{ VScaleScreen }}</script>

——————————————— 本文为CSDN博主「鲁少聚」的原创文章,遵循CC 4.0 BY-SA版 原文链接:https://blog.csdn.net/L1147484597/article/details/128443705

本文链接地址:https://www.jiuchutong.com/zhishi/287967.html 转载请保留说明!

上一篇:vue3+Naive UI数据表格基本使用方式(vue ui怎么用)

下一篇:若依框架(前后端分离)打war包部署到linux(若依框架前后端分离手机号登录)

  • 电商推广:怎样获取高质量客户(电商怎么推广)

    电商推广:怎样获取高质量客户(电商怎么推广)

  • 魅族18用的什么屏幕(魅族18用的什么电池)

    魅族18用的什么屏幕(魅族18用的什么电池)

  • 卡贴机可以换卡吗(卡贴机可以换卡重新激活吗)

    卡贴机可以换卡吗(卡贴机可以换卡重新激活吗)

  • 无符号二进制整数1111001转换成十进制数是(无符号二进制整数111111转换成十进制数是)

    无符号二进制整数1111001转换成十进制数是(无符号二进制整数111111转换成十进制数是)

  • 变压器属于什么设备类别(变压器属于什么负载)

    变压器属于什么设备类别(变压器属于什么负载)

  • Word如何删除文章中的空行(word如何删除文本框的边线)

    Word如何删除文章中的空行(word如何删除文本框的边线)

  • 微博钱包充值不了(微博无法充值)

    微博钱包充值不了(微博无法充值)

  • 海康球机ac24电源接法(海康4223球机)

    海康球机ac24电源接法(海康4223球机)

  • 手机硬盘坏了能修复吗(手机硬盘坏了能把里面资料弄出来吗)

    手机硬盘坏了能修复吗(手机硬盘坏了能把里面资料弄出来吗)

  • 快手蓝v认证花钱吗(快手蓝v认证花费多少钱)

    快手蓝v认证花钱吗(快手蓝v认证花费多少钱)

  • 键盘保存快捷键是ctrl加什么(excel键盘保存快捷键)

    键盘保存快捷键是ctrl加什么(excel键盘保存快捷键)

  • 外屏碎了不换有影响吗(外屏碎了不修)

    外屏碎了不换有影响吗(外屏碎了不修)

  • macbook有几款(macbook有哪几款)

    macbook有几款(macbook有哪几款)

  • 朋友圈仅聊天对面什么状态(朋友圈仅聊天对方显示什么3)

    朋友圈仅聊天对面什么状态(朋友圈仅聊天对方显示什么3)

  • 华为p40是直屏还是曲屏(华为p40是不是直屏)

    华为p40是直屏还是曲屏(华为p40是不是直屏)

  • 华为nova机身尺寸是多少(华为nova机身尺寸多大)

    华为nova机身尺寸是多少(华为nova机身尺寸多大)

  • 微信里照片多久过期(微信里照片多久可以删除)

    微信里照片多久过期(微信里照片多久可以删除)

  • 如何取消微信刷脸功能(如何取消微信刷脸登录)

    如何取消微信刷脸功能(如何取消微信刷脸登录)

  • 金立s10b多任务界面在哪里(金立s10任务栏怎么设置)

    金立s10b多任务界面在哪里(金立s10任务栏怎么设置)

  • web前端属于ui吗(web前端属于什么)

    web前端属于ui吗(web前端属于什么)

  • 红米k20pro电池耐用吗(红米k20pro电池能用几年)

    红米k20pro电池耐用吗(红米k20pro电池能用几年)

  • 微信辅助解封不符合要求是怎么回事(微信辅助解封不了)

    微信辅助解封不符合要求是怎么回事(微信辅助解封不了)

  • 拍视频怎么拍(手机拍视频怎么拍)

    拍视频怎么拍(手机拍视频怎么拍)

  • 苹果7怎么指纹加密微信(苹果7怎么指纹解锁直接进去桌面)

    苹果7怎么指纹加密微信(苹果7怎么指纹解锁直接进去桌面)

  • macOS Big Sur 开发者预览版 Beta 6正式推送(macos big sur使用)

    macOS Big Sur 开发者预览版 Beta 6正式推送(macos big sur使用)

  • ICLR2023《Crossformer: Transformer Utilizing Cross-Dimension Dependency for Multivariate Time Series》

    ICLR2023《Crossformer: Transformer Utilizing Cross-Dimension Dependency for Multivariate Time Series》

  • 非金银首饰以旧换新增值税
  • 实收资本属于限定性净资产吗
  • 办公用品普通发票的会计分录
  • 即征即退进项税额为哪些
  • 分包从属总包选择简易计税可以吗
  • 资本公积转增股本个人所得税
  • 印花税没有在我的待办里是不是就不用申报
  • 红字发票信息表填好后再怎么操作
  • 企业辅助生产车间
  • 建设用地规划许可证和建设工程规划许可证的区别
  • 电子发票和纸质发票哪个好
  • 小规模纳税人企业所得税起征点
  • 实际发生坏账后要把计提的坏账冲回吗?
  • 个人应纳税所得额怎么算
  • 代销手续费怎么做账
  • 企业充值是什么意思
  • 别人退保证金多久能到账
  • 境外工资薪金
  • 企业所得税负数会计分录
  • 购买国债逆回购有股东限制
  • 三板市场前世今生
  • 代理进口货物怎么做账
  • 个体工商户出售住房增值税
  • 电子商业承兑与银行承兑哪个好
  • 怎样找此电脑
  • 如果网页上有错字怎么办
  • 增值税预缴税款表电子版下载
  • 处理车辆违章送哪个部门
  • 跨年冲减无发票怎么入账
  • 广告公司收到广告费发票如何入账
  • 公司比赛奖金计入什么科目
  • services.exe是什么服务
  • 收到工程款怎么做账务处理
  • 白金汉宫维多利亚女王雕像寓意
  • php imagettftext()函数
  • 免抵退税额好难懂
  • php模板教程
  • 出口货物应退增值税如何计算
  • 代垫运杂费计入原材料成本吗
  • php的框架
  • 委托加工业务的组成计税价格
  • 动产什么时候取得所有权
  • 购买项目用设备计入什么科目
  • mysql查询字段为空的数据
  • 为什么盈利要利息呢
  • 应交税费核算范围
  • 企业营改增税率是多少
  • 营改增和个税改革的意义
  • 可供出售金融资产的会计处理
  • 发放职工薪酬的记账凭证
  • 应收账款坏账计入资产减值损失还是信用减值损失
  • 房租增值税专票税点
  • 上家失控发票补税补不起
  • 纳税人的住房租金专项
  • mysql如何优化性能
  • ctrmon.exe
  • centos文件权限详解
  • Win10 Mobile build 14393.189安装与上手体验视频
  • centos如何删除bond
  • linux修改计算机主机名和用户名
  • microsoft ime进程
  • win7 64位系统无法清空回收站的故障原因及解决方法
  • mac怎么找自己下载的应用
  • windows8怎么设置锁屏密码
  • linux怎样过滤一个关键字
  • w10系统怎么压缩
  • win10更新只能暂停35天
  • cocos2dx 3.17
  • Ext JS 4实现带week(星期)的日期选择控件(实战二)
  • js 模拟滑动
  • 查看网关的mac地址是多少
  • unity集成到app后变大了
  • js获取对象key的方式有哪些
  • js复制div
  • Java如何获得集合里的元素
  • 发票开票人一定要真实姓名吗
  • 企业填写莞e申报的通知
  • 买车险代收车船税合法吗
  • 出成效的意思
  • 房屋契税可以退个人所得税吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设