echarts中flexible.js的使用

最新推荐文章于 2024-07-19 10:58:10 发布
最新推荐文章于 2024-07-19 10:58:10 发布
阅读量1.1k 收藏 10
点赞数
分类专栏： 笔记 文章标签： flexible.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45832807/article/details/108432102
版权

在页面中使用flexible.js:

  1. 创建项目文件
  2. 在项目文件下通过npm下载flexible.js包
    在这里插入图片描述
  3. 在html界面中引入flexible.js包
    在这里插入图片描述
  4. 判断flexible.js是否失效
    运行html页面到浏览器中，F12检查，查看html标签上面有没有添加style样式，如果有添加的font-size样式，证明flexible.js生效了。
    在这里插入图片描述

注：
在这里插入图片描述

1920 / 24 = 80；（设计稿的宽度是1920px）
通过cssrem插件，将插件的手动转换换成80，当用户在使用css的时候写80，就会自动将80px转换成1rem
在这里插入图片描述
注意下载cssrem插件之后，要重启一下vscode，确保插件的正常运行🤭
在这里插入图片描述

HerayChen
关注
  • 0
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
移动端自适应flexible.js的使用方法(不用三大框架，仅写一个单html页面使用)***(推荐这个)***
人间草木
03-28 3863
第一步： 下载flexible.js，代码如下，可以复制过去用 ;(function(win, lib) { var doc = win.document var docEl = doc.documentElement var metaEl = doc.querySelector('meta[name="viewport"]') var flexibleEl = doc.q...
手淘flexible.js框架使用和源代码讲解小结
10-17
手淘框架是一个用来适配移动端的js框架，这篇文章主要介绍了手淘flexible.js框架使用和源代码讲解小结，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
PC移动端适配方案——flexible.js
最新发布
风紧不扯呼的博客
07-19 499
移动端适配方案—flexible.js。它的核心原理是根据不同的视口宽度动态调整网页中html根节点的font-size，从而实现网页内容的自适应显示。通过配合使用‌rem单位，flexible.js可以帮助开发者实现网页元素尺寸在不同宽度设备中的等比缩放效果。‌rem是css的一个单位，其根据根元素的font-size大小设置rem的大小，1rem=1font-size。即可通过改变font-size改变rem，适用于屏幕适应。
flexible.js的使用
路虽远，行则必至！
07-24 987
rem，是相对单位，是相对HTML根元素，可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。
flexible
郑州彭于晏
07-12 834
flexible.js (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_flexible.js下载_flexible.js下载_适配js文件_
10-03
总的来说，flexible.js是一款为前端开发者量身打造的智能适配工具，它简化了多设备适配的过程，提升了用户体验，特别是在Echarts等数据可视化应用中，flexible.js的使用能够确保图表在任何设备上都能展现出卓越的...
rem适配js文件flexible.js和echartPxToRem.js
02-22
3. 在CSS中使用rem单位来定义界面元素的尺寸，如宽度、高度、边距等。 4. 对于ECharts的配置，让`echartPxToRem.js`自动处理px到rem的转换，或者手动将px值转换为rem，确保图表的大小和位置在不同设备上表现良好。 ...
基于react+echarts+flexible实现的数据大屏+源代码+文档说明
03-12
该资源内项目源码是个人的毕设，代码都测试ok，都是运行成功后才上传资源，答辩评审平均分达到96分，放心下载使用！ 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 2、本项目...
基于ECharts与Flexible的响应式数字大屏可视化源码
03-25
项目概述：本项目采用JavaScript为主要开发语言，整合了HTML、CSS和Less预处理器技术，构建了一套基于Flexible.js与ECharts.js的响应式数字大屏可视化解决方案。整个项目包含1626个文件，其中主要包括946个Less文件...
flexible.js
07-05
淘宝自适应插件flexible.js，根据屏幕适配html和font-sizi 公式：结果=测量数据/75，比如100px,100/75=1.33333rem,因为rem值(html标签字体大小)插件自己设置了，所以使用就直接写1.3333rem 用法：导入插件=> rem是相对于根元素，这样就意味着，我们只需要在根元素确定一个px字号，则可以来算出元素的宽高。1rem=16px(浏览器html的像素，可以设定这个基准值），假如浏览器的html设为64px，则下面的元素则1rem=64px来运算。 flexible默认是分成10份；所以1rem = 75px; 在pc端显示时，如果我们的屏幕超过了750px，就按照750设计稿走，不会让我们的页面超过750px
移动端自适应flexible.js的使用方法(不用三大框架，仅写一个单html页面使用）推荐
01-19
第一步： 下载 flexible.js，代码如下，可以复制过去用 ;(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 var flexible = lib.flexible ||
引入echarts的js文件报错——Cannot read properties of null (reading ‘getAttribute‘)
content899的博客
10-16 3491
引入echarts文件报错
屏幕适应之关于flexible.js的使用
m0_56597301的博客
01-03 6105
rem是css的一个单位，其根据根元素的font-size大小设置rem的大小，。即可通过改变font-size改变rem，适用于屏幕适应。flexible.js是用来使内容适应屏幕大小的插件。原理是通过 js 动态修改根元素的 font-size 大小，设置1rem等于可视窗口的多少。下图为部分源代码，表示设置font-size为窗口（1920px）的24分之一，即80px。
flexible 粘贴即用
前端从0到100000
08-20 463
//可自行对比 (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使用方式
05-24
flexible.js是一款用于移动端自适应布局的JavaScript库，可以根据不同设备的屏幕大小动态设置HTML根元素的字体大小，以达到适应不同屏幕的效果。 使用步骤如下： 1. 在HTML中引入flexible.js，可以通过CDN方式引入或者下载到本地后引入。 ```html <script src="https://cdn.bootcdn.net/ajax/libs/flexible.js/0.4.0/flexible.min.js"></script> ``` 2. 在CSS中使用rem单位代替px单位进行布局，例如： ```css body { font-size: 14px; /* 以14px为基准 */ } .box { width: 2rem; /* 相当于28px */ height: 1rem; /* 相当于14px */ } ``` 3. 在JS中可以通过Flexible.dpr获取当前设备的dpr值，以及Flexible.rem获取当前设备的1rem大小。 ```javascript console.log(Flexible.dpr); // 获取当前设备的dpr值 console.log(Flexible.rem); // 获取当前设备的1rem大小（单位px） ``` 需要注意： 1. 在使用flexible.js时，不要直接给HTML、BODY等元素设置字体大小，否则会影响到flexible.js的效果。 2. 在使用flexible.js时，要保证设计稿使用的尺寸单位为px，而不是pt、em等其他单位。因为flexible.js只能识别px单位。 3. 在使用flexible.js时，要根据设计稿的尺寸进行计算，例如设计稿宽度为750px，那么1rem应该等于设计稿宽度的1/75，即10px。 希望对你有帮助。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值