大屏项目总结

rem大屏自适应方案

1. 屏幕很宽时，要横向左右居中，屏幕很高时，要竖向上下居中

2. 以宽高比16：9为基础进行比较，先确定宽度，再确定高度

3. 以Wp为页面的有效宽度，Hp为页面的有效高度进行计算

• 情况一

• 当设备宽高比大于16:9时说明页比较宽了 Hp直接取实际高度

• 计算Wp公式 $Wp=h实际 * 16/9$

• 计算Hp公式 $Hp=W实际 * 9/16$

• 情况二

• 当设备宽高比小于16:9时说明页面比较高了 WP直接取实际宽度

• 计算Wp公式 $Wp=W实际$

• 计算HP公式 $Hp=W实际 * 9/16$

4. 获取浏览器的长度和宽度 ,然后套用公式进行判断

5. document.body. clientWidth //body

document.documentElement.clientWidth // html

6. rem ：MDN的解释是 根元素的字体大小
7. 设置rem是页面宽度/100

使用rem进行页面自适应

1.根据设计稿的尺寸按比例放大缩小 2.假设一个div在设计稿中长度100px,设计稿宽度是1920px 3. 那么该div在页面中长为100/1920* 100rem 4.通过写个函数便捷计算

项目总体以flex布局为基础，各模块视图以grid布局为基础，可以有效的分配大小

注意点是 echarts一定要设置长宽，不然会不展示。

总结 很锻炼css