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

最新推荐文章于 2024-07-21 14:16:06 发布
最新推荐文章于 2024-07-21 14:16:06 发布
阅读量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
关注
大屏可视化适配与布局
qq_39699953的博客
10-26 652
大屏项目的屏幕适配与布局
vue + rem + less 可视化大屏自适应适配
fang0321的博客
04-06 1294
(function(win, lib) { var doc = win.document var docEl = doc.documentElement var metaEl = doc.querySelector('meta[name="viewport"]') var flexibleEl = doc.querySelector('meta[name="flexible"]') var dpr = 0 var scale = 0 var tid .
flexible手淘适配H5
08-11
曾几何时为了兼容IE低版本浏览器而头痛，以为到Mobile时代可以跟这些麻烦说拜拜。可没想到到了移动时代，为了处理各终端的适配而乱了手脚。
lib-flexible适配大屏方案（附移动端适配）
wwf1225的博客
12-20 1180
lib-flexible适配大屏方案:lib-flexible适配大屏方案（附移动端适配） - 简书 前言   相信大多数移动端前端开发者都是用过lib-flexible来作为移动端适配的解决方案。lib-flexible是淘宝项目组开发出来的一个小插件，属于开源项目，可以在各类项目中引入并使用，为移动端的开发者带来了无穷的便利。   但是，有人提出为什么在屏幕尺寸超出一定分辨率后便不再适配？今天针对该问题来尝试给出解决方案。 关于lib-flexible 1. 解读   lib-fle.
一次搞懂数据大屏适配方案 (vw vh、rem、scale)
最新发布
2401_83384536的博客
07-21 1758
当接到可视化大屏需求时，你是否会有以下疑问👇如何做一款定制化的数据大屏？ 开发可视化数据大屏如何做自适应？ vm vh、rem、scale 到底哪种比较好？ 时间不够，有没有偷懒的方法？
flexible 粘贴即用
前端从0到100000
08-20 467
//可自行对比 (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.js + rem 智能大屏适配
m0_61049675的博客
05-08 492
* 约束屏幕尺寸 */// 当屏幕宽度小于1024px时html {important;// 当屏幕宽度大于1920px时html {important;
flexible 移动端适配
weixin_30555515的博客
02-24 172
一、安装lib-flexible 一、安装lib-flexible 二、在项目入口文件main.js中引入lib-flexible import 'lib-flexible' 三、在项目根目录的index.html 头部加入手机端适配的meta的代码 <meta name="viewport" content="width=device-width,...
Echarts+Vue3.0 大数据可视化项目，大数据可视化大屏系统源码+笔记
04-23
-基于 flexible.js + rem 智能大屏适配 - VScode cssrem插件 - Flex 布局 - Less 使用 - 基于ECharts 数据可视化展示 - ECharts 柱状图数据设置 - ECharts 地图引入 Echarts+Vue3.0 大数据可视化项目源码及教程 ...
大屏可视化适配 flexible
07-28
- *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_...
2023年7月最新|大屏可视化项目、配置
李桥桉的博客
06-12 1337
大屏下显示一般都是16:9尺寸 1920*1080 ，做适配也就是在这个比例的基础上进行的。操作步骤也很简单
flexible.js
09-19
淘宝的网页手机端采用了flexible.js对移动端进行适配，设计图一般为750px，单位为rem,计算方式为设计图测量的宽度/75（若设计图为640px，则应除以64）。例如，测量某一个div的高度为75px,则换算成rem为：75/75=1rem。
手淘移动端适配方案——lib-flexible.js
09-18
移动端适配一直以来都是前端开发中不可或缺的重要组成部分，如果没有了它，那么你做出来的页面极有可能会出现各种意外。手淘开发团队经过多年的摸索和实战，总结了一套移动端适配的方案——flexible方案。
一个基于Vue+datav+Echart框架的大数据可视化(大屏展示)模板源码+项目使用说明.zip
12-27
一个基于Vue+datav+Echart框架的大数据可视化(大屏展示)模板源码+项目使用说明.zip 【主要文件介绍】 文件 作用/功能 main.js 主目录文件，引入 Echart/DataV 等文件 utils 工具函数与 mixins 函数等 views/ home....
Flexible Box 使用
qq_42441107的博客
12-07 172
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局。 行内元素也可以使用 Flex 布局。 .box{ display: flex; } 行内元素也可以使用 Flex 布局。 .box{ display: inline-flex; } Webkit 内核的浏览器，必须加上-webkit前缀。 .box{ display: -webkit-flex; /* Safari */ display: fle
vue使用lib-flexible实现屏幕适配
书中自有妍如玉的博客
12-02 2320
因为在开发中拿到的设计稿页面像素单位是px，要是每一次都需要手动转成rem的话，就十分耗费时间精力，所以px2rem-loader就可以帮我们的大忙了。5、完成了上面步骤后，就可以对页面涉及到的css宽度、高度，还是正常采用px单位编写像素值，项目会自动将px转换成rem，并保持自适应适配效果。2、import 'lib-flexible //在vue项目里面的src目录下的main.js文件全局引用'1、npm install lib-flexible -S //安装lib-flexible。
flexible.js + rem 适配布局
ZhouHuiCSDN
06-16 1162
再当我们输入宽度的时候，我就可以看到vscode自动帮我们计算好了对应的rem值，我们只要点击使用就可以了。设置成24等份，设计稿为1920px，这样 1rem 就是 80px。
使用Flexible实现移动端页面的终端适配，及快捷设置开发工具px转换rem
u012716788的专栏
06-06 633
使用Flexible实现手淘H5页面的终端适配 · Issue #17 · amfe/article · GitHub
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值