普通web项目(非webpack打包)用flexible进行响应式改造的方法

主要是要对项目里面的css进行改造。把px转为rem。

1、保证每个html页面引入flexible.js文件

flexible.js 需进行改造才能适用于电脑屏幕

2、css中px转为rem

自动转换工具

此工具按照说明操作即可,不用自己手动一个个把px转为rem

3、echarts图表的适配使用

echarts图表使用的是px单位,工程中在上述步骤后,使用的是rem单位,所以要对echarts的数值相关配置进行转换,不然图表样式会混乱。

转换方法代码:

1
2
3
4
function remToPx(rem) {
var fontSize = document.documentElement.style.fontSize;
return Math.floor(rem * fontSize.replace('px', ''));
}

echarts图表的配置代码里面,数值相关:fontsize、lineHeight、right、left、top、bottom、padding、barWidth等等直接用remToPx(rem值)替代。

例如:一个基于1920x1080像素的设计,换算基数是192

未转换前写法:

1
2
fontsize: 12px
lineHeight: 30px

12px的rem值是0.0625,30px的rem值是0.1563。这些值可以通过步骤2的工具转换。

转换后写法:

1
2
fontsize: remToPx(0.0625)
lineHeight: remToPx(0.1563)

4、按实际效果对css进行微调

以上,基本可以实现html页面的响应式了,测试可用。尚未对具体老生产项目进行,慎用。

5、缺点

echarts图表在浏览器大小变化后需要刷新界面才会完美,不大自动。