设计稿为 16 ： 9 ，屏幕也是 16 ： 9 的去展示，当设备的宽高比大于 16：9 ，页面的有效宽度为设备的高度乘于 16：9得到页面的有效宽度。如果设备的宽高比小于 16：9，那设备的宽度就等于页面的有效宽度。页面的有效高度在任何情况下都等于有效宽度除于16：9 假如某个div在设计稿中长100px ， 设计稿宽度1920px，那该div在页面中的长度为 100/1920 x 100rem 可以用documen.documentElement.clientWidth/height来获取设备的宽高，宽高相比看看是否大于还是小于16：9，根据结果，按照上面的公式依次计算宽，高。用算出来的有效宽度去除100得到 1 rem是多少。这样我们每次加载页面都会自动计算 1 rem是多少。 页面采用的是grid布局 理由1：大屏是可控的，可以装chrome 理由2：grid布局很方便，行，列和间隙都可以控制。 在写echarts的时候，比如图里的字应该跟着页面的大小去自适应，可以用 设计尺寸 / 设计稿宽度 * 页面的有效宽度。
