ECharts数据可视化项目经验

一、适配方案

1.项目需求

• 设计稿:1920px
• pc端适配：宽度在1024-1920之间页面元素宽高自适应

2.适配方案

• flexible.js + rem单位 + flex布局
• 检测浏览器宽度，修改html文字大小
• 页面元素根据rem适配大小，配合cssrem插件
• 页面快速布局

3.移动端

①. flexible.js把屏幕分成10等份
②. 移动端效果图是750px
③. cssrem插件的基准值是75px
④.rem值自动生成

4.pc端

①. flexible.js把屏幕分成10等份
②. PC端的效果图是1920px
③. cssrem插件的基准值是192px
④. rem自动生成
⑤.屏幕宽度约束在1024-1920之间有适配

@media screen and (max-width: 1024px) {
   
    html {
   
        font-size: 42.66px!important;
    }
}
@media screen and (min-width: 1920px) {
   
    html {
   
        font-size: 80px!important;
    }