大屏适配

大屏适配考虑

经验/原则：

• 设计尺寸建议按输出“分辨率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等比例缩放

方案：vw/vh单位

todo 参考 https://www.bilibili.com/video/BV1bZ421T7Xn/