大屏适配
2025年3月30日大约 1 分钟
大屏适配考虑
大屏问题
- 图表库
- 布局
- 屏幕自适应：resize、屏宽比
经验/原则：
- 设计尺寸建议按输出“分辨率px”设计 // + 拼接后（如像素在 4k 左右）直接按照总和设计
- 特殊尺寸不要考虑适配电脑屏幕又适配拼接屏幕 （因为不可能一稿既适配电脑、也适配各种尺寸）
- 优先考虑目标屏幕的适配，要针对性设计，而在小屏根据等比例缩放显示
选定目标屏幕、尺寸
常见屏幕：（一般1920x1080以上的称为“大屏”）
- 320 auto （移动设备）
- 375 auto （移动设备）
- 750 auto （移动设备）
- 1280 760
- 1920 1080 （常见PC端电脑屏幕）
- 3840 2160 （4k）
- 7680 2160
大屏设备：
投影
LED
拼接
1920 * 1080屏幕1 * 1（16:9）3840 * 2160屏幕2 * 2（16:9）5760 * 3240屏幕3 * 3（16:9）7680 * 3240屏幕4 * 3（64:27）9600 * 3240屏幕5 * 3（80:27）
常见的大屏适配方案
- 方案1：百分比设置
- 方案2：rem单位 + 动态设置html的
font-size - 方案3：vw单位
- 方案4：flex弹性布局
- 方案5：scale等比例缩放