vue、ECharts、flexible.js在移动端的自适应安卓、苹果等机型的分辨率

因我们在移动端中大多数是使用rem、 vw、vh，而 echarts 里面的尺寸只能写 16或16%，有的如：fontSize 之类的只有16 。导致写的时候按分辨率750×1334px ，在分辨率480×800px的机型上就差异跟大，字体大小、宽高、left、top、right、bottom等在设置的值是16或16%时，会有很大偏差，这就需要我们自己去计算处理了。

解决思路：将实际窗口的大小与设计图窗口大小做比得到要给相对的比率，每个单位数值和这个比率相乘即可。即：按比例缩放字体。比如设计图是750x1334的，某个数值是fontSize:12，当前显示器是480的大屏，那么你现在的字体大小应该是：12*(480/750)=7.68。

1. 方案一：

 //方案一还不完善，还没仔细去验证methods: {//initWidth 设计稿尺寸calculateSize (val,initWidth=1920) {//当前视口宽度let nowClientWidth = document.documentElement.clientWidth;//换算方法return val * (nowClientWidth/initWidth);}initChart () {let option = {legend: { left: this.calculateSize(30) textStyle: {fontSize: this.calculateSize(16)}}}}}

2. 方案二：

如果项目中有引入flexible.js，推荐使用以下方案

flexible中，1rem是相对于750px的设计稿,1rem = 100px，现在使用到的16px要转换为rem，就是设计稿中的(16 / 100)rem，然后echarts是只支持px的所以结果就是(16 / 100) * window.rem，所以我们可在data中先用 window?.rem / 100

 export default {data () {return {conversionSize: window?.rem / 100 || 1, // window.rem来自与flexible.js}},  methods: {initChart () {let option = {legend: { left: this.conversionSize * 30textStyle: {fontSize: this.conversionSize * 16}}}}}

vue、ECharts、flexible.js在移动端的自适应安卓、苹果等机型的分辨率相关推荐

vue项目实现大屏PC端字体自适应
vue项目实现大屏PC端字体自适应我们字体自适应选择使用rem作为单位,通过监听窗口大小的变化,更新1rem的对应的px数来实现字体自适应. 注意该方法,我们需要在APP.vue文件中实现, 首先A ...
vue使用pdf.js实现移动端在线PDF文件预览
背景产品需求涉及到动态的PDF展示,PDF是由后端去生成的,然后下发给前端在线的cdn地址,H5需要实现在线PDF预览的能力方案 H5展示合同PDF,有很多实现方式.但是通过尝试后发现在不同操作系 ...
网约车成品源码代驾顺风车拼车打车货运司乘双端小程序安卓苹果源码
PHP顺风车源码打车源码拼车源码代驾小程序源码 uniapp源代码同城打车代驾小程序顺风车拼车APP源码网约车APP 司机端:安卓,苹果乘客端:安卓,苹果,小程序系统是基于Thinkphp ...
vue echarts中改变canvas长和宽自适应
存放Echarts的DOM容器,如果给的高和宽是百分比,渲染的时候DOM容器的高和宽是按百分比给的,但是DOM容器下的子元素div和canvas高和宽是根据图标内容渲染.项目应用的时候,底部会有一部分 ...
[手游] 大宗师翅膀版-金庸恩仇录 [复制链接]一键服务端+手工外网端+GM后台+安卓苹果+配套教程
下载地址:https://pan.baidu.com/share/init?surl=yihqfjgErNVg4W5PwI6qkQ 提取码:https://www.mxswl.net/538.html
新版整理MT3换皮梦幻/久久西游源码+安卓苹果双端
正文: 完整标题: MT3换皮梦幻[久久西游]最新整理Linux手工服务端+GM后台+安卓苹果双端视频安装教程在源码压缩包内程序: wwnnw.lanzouf.com/inLX70a8mswb 图 ...
vue中使用flexible.js并配合px2rem-loader实现移动端布局
适配移动端flexible.js 适用于最新版vue-cli,配置手淘的lib-flexible.js和rem实现移动端页面自适应 1.安装lib-flexible.js npm install li ...
Vue移动端flexible.js+MuseUi
因为公司有个项目需求,手机端的.之前就写了一个一样的项目,只不过是用原生的写的,心想刚写了个vue后台管理系统,何不也用vue写,所有就没有把之前的利用过来.那么问题来了,要让手机端自适应我们该怎么做 ...
vue 移动端适配flexible.js使用方法
原理: flexible.js 适配方案采用rem布局,根据屏幕分辨率大小不同,调整根元素html的font-size,从而达到每个元素宽高自动变化,适配不同屏幕操作步骤: 1.安装lib-flex ...

vue、ECharts、flexible.js在移动端的自适应安卓、苹果等机型的分辨率

vue、ECharts、flexible.js在移动端的自适应安卓、苹果等机型的分辨率相关推荐

最新文章

热门文章