普通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图表在浏览器大小变化后需要刷新界面才会完美，不大自动。