大屏可视化项目实践
谈谈如何使用 rem 和 px 函数适配各种屏幕?
假设我们的设计稿就是 16:9 的比列大小，大屏显示器就是右边的👉 紫色框框，但是想让右边的紫色content区域也按照16：9并且上下居中，左右居中显示的。
但是新的问题又随之而来了，如果大屏更宽更大的话，如何保证它也是按照当前比列并且居中显示的呢？
对应的方案我觉得应该说如果大屏幕比较宽的话，我们就让它左右居中，如何大屏幕比较高的话，我们就让它上下居中。
那么找到规律后，其实我还是不会做。。。 哈哈哈
所以我找到一个算法来解决当前的这个问题。
- 如下图：
Wp 代表的就是页面有效宽度。 如何设备的宽和高大于 16:9 那就说明设备很宽。 那么高度900的话我们得到的宽度就是1600。
Hp 代表的就是页面有效高度。也是 16:9的关系。
还有另外一种情况就是这个算法中的第二个公式，也就是可能设备的宽高是小于16:9的。那么就说明设备很窄，很窄的话那么就是Wp === W设备 。
高度也是一样的做法，那么我们知道了这个公式后就可以带入项目中了，在 js中设置 1rem = Wp /100。这个公式的意思就是我们拿到了Wp后除以Wp100，也就是把Wp的
上文中说如何做整体的适配，接下来，我们一起看看如何适配一个div。
假设这个div在设计稿中的宽度说X，在大屏中的宽度说Y ，X 和 Y 的关系就是放大。
一个div在页面中的宽度，除以W页面的宽度🟰 div在设计稿中的宽度除以W设计 中的宽度，也就说，Size页面宽度 = 100个rem
也就明确的得出：一个div在页面中的尺寸【Size页面】宽度🟰 Size设计 一个div在设计稿中的宽度 除以W设计设计稿图的宽度 乘以 100 rem，也就是说只要知道div在设计稿中的尺寸，就能得到div在页面中的尺寸，因为W（设备）的尺寸一般都是固定的。
假设某 div 在设计稿中长 100px，设计稿宽度 1920px，那么该 div 在页面中长为 100/1920 X 100rem，可以写一个 px() 函数来计算 100px 对应的 rem。
const px = (n) => n / 2420 * window.pageWidth;
项目用到了Grid布局和Echarts
Grid布局教程：阮一峰老师的CSS Grid 网格布局教程
Echarts官网教程:Echarts
我是一个初学前端的菜🐔，难免会有理解不到位或者错误的地方，希望大佬发现能及时批评我！。
