使用flexible进行可视化大屏适配

最新推荐文章于 2024-04-22 15:36:45 发布
最新推荐文章于 2024-04-22 15:36:45 发布
阅读量1.9k 收藏
点赞数
文章标签： 前端 javascript html5 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jinse29/article/details/122219002
版权

关于大屏可视化，大多默认是1920*1080，当然也有更高分辨率，我们做开发适配的时候，可以利用flexible进行屏幕适配工作。

针对分辨率，可以进行一个宽高配比，flexible默认将屏幕分割为10份，我们可以自行处理为24份，1920/24=80，所以1rem = 80px，利用rem搭建页面，保证了基本的宽高配比

在处理设计图尺寸的时候，以1920*1080举例

1920/24=80          1rem = 80px

3940/24=80          1rem = 160px 其实就是两块1920*1080的并列拼接

17280/24=720      1rem = 720px 其实就是27（9*3）块1920*1080的排列

下载链接，写备注的地方可根据实际情况修改即可和👇👇👇

flexible.js-Web开发文档类资源-CSDN文库

小菜花29
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
手淘插件可视化大屏自适应
12-03
使用echars开发的可视化大屏自适应,通过把浏览器分成多少等分达到自适应目的
vue实现酷炫可视化大屏
09-15
主要是练习对v-charts的使用,技术要点:vue+echarts+v-charts+less+flexible,对初学者较为友好，如果对图表可视化有兴趣可以下载下来自行理解代码并自行编写的更好~，该资源免费下载，难度系数低哦!!! 资源下载下来记得安装依赖npm i
基于ECharts与Flexible的响应式数字大屏可视化源码
03-25
项目概述：本项目采用JavaScript为主要开发语言，整合了HTML、CSS和Less预处理器技术，构建了一套基于Flexible.js与ECharts.js的响应式数字大屏可视化解决方案。整个项目包含1626个文件，其中主要包括946个Less文件，439个JavaScript文件，232个HTML文件，以及其他少量的图片和字体文件。该方案运用了多样化的图表形式，通过ECharts的强大可视化能力，灵活展现了各类数据，实现了信息直观、互动性强的数字大屏展示效果。
计算机中解决不匹配,电脑显示屏显示不匹配.怎么办
weixin_30394975的博客
07-24 1万+
1. 电脑显示器分辨率不匹配怎么办方法一、驱动故障导致分辨率不正常1、这里以 Windows 8 为例，首先找到系统中的“计算机”图标。2、然后选中“计算机”并点击鼠标右键，再点击“管理”选项，如7a6431333363366134图所示。3、接下来在计算机管理界面的左窗格选择“设备管理器”选项，如图所示4、然后在右窗格中点击“显示适配器”，检查是否有叹号或者问号，如果有说明显卡驱动不正常。...
移动端适配大总结
qq_41194539的博客
06-19 1440
大家都知道现在市面上的手机尺寸越来越多，对于一名前端开发来说，面临着开发上的挑战。要使各个手机上的UI达成一致效果，就需要我们采用各种方案规避差距。
flexible 粘贴即用
前端从0到100000
08-20 431
//可自行对比 (function flexible (window, document) { var docEl = document.documentElement var dpr = window.devicePixelRatio || 1 // adjust body font size function setBodyFontSize () { if (document.body) { document.body.style.fontSize = (12 *
使用Flexible实现移动端页面的终端适配，及快捷设置开发工具px转换rem
u012716788的专栏
06-06 607
使用Flexible实现手淘H5页面的终端适配 · Issue #17 · amfe/article · GitHub
flexible.js + rem 适配布局
ZhouHuiCSDN
06-16 768
再当我们输入宽度的时候，我就可以看到vscode自动帮我们计算好了对应的rem值，我们只要点击使用就可以了。设置成24等份，设计稿为1920px，这样 1rem 就是 80px。
3.1、public公共样式
weixin_44195250的博客
09-27 320
public>index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="vi...
vue3项目网站自适应大屏幕宽度（width＞1920）
祈盼的博客
03-03 5072
vue3项目自适应屏幕宽度 安装插件：lib-flexible、postcss-px2rem、px2rem-loader cnpm install lib-flexible --save cnpm install postcss-px2rem --save lib-flexible是来作为移动端适配的解决方案的，postcss-px2rem将代码中px自动转化成对应的rem的一个插件。 在main.js中引入 import 'lib-flexible' 在vue.config.js中引入如下代码 m
vue项目中使用lib-flexible解决移动端适配的问题解决
10-18
主要介绍了vue项目中使用lib-flexible解决移动端适配的问题解决，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
网页设计，前端ECharts动态可视化大屏
10-14
核心技术： -基于 flexible.js + rem 智能大屏适配 - VScode cssrem插件 - Flex 布局 - Less 使用 - 基于ECharts 数据可视化展示 - ECharts 柱状图数据设置 - ECharts 地图引入
笔记本通过hdmi连接显示器分辨率设置
qq_21383977的博客
09-29 9849
1、右键显示设置中多显示器设置选择仅在2上显示 ——>
vba 根据分辨率 调整窗口显示比例_2020 如何选择适合自己的显示器？小白选购电脑显示器必看，附各类型显示器高性价比选购指南分析...
weixin_39816946的博客
12-12 621
2020如何选择适合自己的显示器？小白选购电脑显示器必看，可能是全网最完整显示器参数科普与选购分析。说到显示器的选购，你的反应是什么？价格、尺寸、分辨率，我相信大部分小白最关心的就是这三个问题。这是非常片面的，仅凭这三点无法评估一台显示器的好坏。那么应该如何选择一台适合自己的显示器呢？应该看哪些参数？这些显示屏的参数又代表什么？这些问题都让小白头疼，同时商家眼花缭乱的宣传广告又把小白忽悠的一愣一愣...
前端大屏适配几种方案
热门推荐
Liushiliu104的博客
03-06 2万+
前端大屏适配方案
可视化大屏--响应式适配解决方案flexible.js
Yan9_9的博客
11-24 1351
我们先下载flexible.js插件(在工程化时代之前，人们都是下载的flexible.js文件，工程化之后，我们依赖npm等包管理工具进行下载)那么，在可视化大屏的基础上，我们肯定是要适配所有的屏幕设备，不能出现一换电脑，样式就紊乱的情况。1.找到node_modules下的lib-flexible下的flexible.js。so,我们也不需要自己写媒体查询了，有现成的flexible.js的插件。最近公司开了第二个项目，是一个可视化大屏。2.修改对应代码为以下代码。然后重启Vscode即可。
【可视化大屏】屏幕多分辨率适配方案
qq_41466440的博客
02-01 1970
【可视化大屏】屏幕多分辨率适配方案
可视化大屏适配方案
weixin_42878641的博客
12-20 3191
针对不同分辨率，不同窗口大小的可视化大屏的适配方案。
【前端】数组的常用处理函数
最新发布
lcukyNwa的博客
04-22 444
item------->每个元素值 (必)index----->索引（可选）arr-------- >当前数组（可选）推荐vscode的一款插件来写以下的demo，该插件可以直接在js文件中显示结果，搜 Quokka.js用这个插件去新建一个js文件，直接就运行在node上了forEach不会返回一个新的数组，里面改值会影响原数组，其他方法不影响原数组map可以返回新数组 用于映射，如每个元素都加倍或执行其他转换操作every返回一布尔值，需数组中全部满足。
大屏可视化适配 flexible
07-28
大屏可视化适配flexible.js是一种通过使用CSS的transform属性来实现大屏幕适配的方法。其主要思路是通过计算固定的宽高比例，将大屏幕容器设置为一个参考元素，然后监听浏览器窗口的resize事件，在每次窗口大小改变后重新计算宽度和高度的比例。根据窗口的长宽比与固定的长宽比进行比较，如果窗口的长宽比更长，则根据窗口的高度值重新计算缩放比例，并使用transform的scale属性对大屏幕容器进行缩放操作，同时使用translate属性将容器移动到窗口的中央。同理，如果窗口的长宽比更短，则根据窗口的长度值计算缩放比例，并对大屏幕容器进行相应的缩放操作。通过这种方式，可以实现大屏幕的适配。\[1\]\[2\]\[3\] #### 引用[.reference_title] - *1* *2* [Vue项目大屏可视化适配 transform+解决高德地图经纬度偏移](https://blog.csdn.net/qq_45642765/article/details/125988515)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [Vue 可视化大屏适配方案](https://blog.csdn.net/Windyluna/article/details/122296831)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值