大屏展示浏览器适配

大屏初体验~

大屏搭建屏幕适配问题

此次大屏项目为web端展示，设计图纸为5760 x 1080的尺寸，分为了三个页面，相当于每个页面就是1920 x 1080，开发时为了便于快速还原设计图效果，直接给html,body设置了width：5760px；height：1080px

问题来了，大屏展示测试是在其他地方进行的，本地环境没有看过展示效果。第一次发布测试环境进行测试时，按F11全屏展示后，在大屏幕上展示时出现了滚动 条效果，离了大谱；屏幕分辨率为5760x1080，但是设置这个其实会撑出来，看来还得是用宽高100%进行适配

解决方案：

• html,body宽高设置为100%
• 检测页面的主体模块使用宽高之和是否超过了限度，重要关注其中的margin、padding值，计算的时候要考虑进来；确定宽高没问题后，添加overflow：hidden防止模块内容超出
• 添加了媒体查询，分辨率小于1920时，html,body{width：5760px；height：1080px}，方便本地进行开发及测试人员进行测试；分辨率大于1920时，会使用默认的宽高100%，在大屏上会自适应展示