内容概要:
1、数据可视化大屏自适应,满足不同分辨率需求。
2、利用transform的scale属性缩放,缩放整个页面。。
3、在任意屏幕下保持16:9的比例,保持显示效果一致。
4、更宽:(Width / Height) > 16/9,以高度为基准,去适配宽度。
5、更高:(Width / Height) < 16/9,以宽度为基准,去适配高度。
6、1920*1080的分辨率大屏页面(16:9)比例效果演示。
7、1024*768的分辨率大屏页面(4:3)比例效果演示。
8、8400*3150的分辨率大屏页面(不规则)比例效果演示。
适合人群:
1、具备一定前端基础,熟悉CSS的开发者。
能学到什么:
1、做大屏项目时,需要适配不同屏幕,且在任意屏幕下保持16:9的比例,保持显示效果一致,屏幕比例不一致两边留白即可。
2、利用transform的scale属性缩放,缩放整个页面。
1