描述 在实际业务中，我们常用图表来做数据统计，数据展示，数据可视化等比较直观的方式来达到一目了然的数据查看，但在大屏开发过程中，常会因为适配不同屏幕而感到困扰，下面我们来解决一下这个不算难题的难题 效

背景 近期公司投放在展厅大屏中演示的大数据页面，出现了文字、图表、表格等多类组件显示错乱的情况。 目的 解决页面错乱问题，实现多种分辨率的大屏适配 入坑分析 俗话说的好，走过的最多路，就是网友们套路

现如今，web页面已经不局限于在PC端运行，也需要在移动端运行。而移动端的机型是非常多的，所以我们常常需要将页面做一个移动端适配，使其能在不同的终端完美运行。 1. rem适配 rem是css3新增的一个相对单位，当使用rem为元素设定字体大小时，相对的是HTML根元素的字体大…

以上步骤全部完成之后，重启服务，已经宽高都已能够实现自适应。但是发现两边出现了滚动条： 注意事项：代码中的px是以flexible.js自动计算成rem的，其中有一个隐藏的问题，就是只能自动转换内嵌的style样式。不能计算行内样式中的px。 总结：如果要去除隐疾，全部都要使用…

作为一名前端开发者，你有没有遇到过这种头痛的事情。每次开发pc端的网页时，不管是官网还是管理后台，UI设计师都是按照`1920*1080`（16:9）的比例来给你提供设计稿的，导致你画页面的时候

前言 在做公司做了很多大屏的项目之后，针对于屏幕适配，说实话有很多解决方案，例如媒体查询、scale缩放、Rem、vw等等，但每种方案都有其特定的使用场景，面对不同的项目，我们首先考虑的不是哪种方案最

>步骤一：定义自适应方法(放在需要的页面，如果是vue可放在app.vue中) //首次加载 this.resizeWeb(); //监听窗口缩放(应尽量避免不停缩放) window.addEvent

实现思路 字体自适应 通过写js控制最大fontSize 通过动态调整root的fontSize 通过rem实现自适应 图片来源：https://www.bilibili.com/video/BV1o

描述：echats大屏自适应方案：利用css的transform属性以及设计百分比做到大屏自适应，在不同尺寸大屏上实现等比例缩放