大屏缩放根据实现效果不同，选择的缩放方式也不同。
大致分为三种。
红框：真实显示器窗口
绿框：设计稿显示位置

1 以不能拉伸产生形变为前提

常见的采用以移动端rem概念处理自动缩放。vue-cli中lib-flexible或html中rem，例如vue-cli中设计稿某个元素1920px，通过插件自动输出xxrem，而html中例如调整参数1920，可能根据要求写1.92rem引入js后自动确保宽度适应。
优点：横向宽度永远等比缩放
缺点：和设计稿比列不同的屏幕则无法显示全

image.png

解决方式：小于设计稿宽度屏幕不考虑，高度不够调整竖线上各部分间距

2 以铺满任何屏幕比列为前提

通常采用vw vh，以及百分比配合，确保宽度在任何上都能适应
此时自然会产生形变。
优点：任何大屏都能铺满
缺点：比列对不上会形变

1740024183554.png

3 加入了主次取舍，主要部分缩放，其余部分固定比列显示

弹性布局flex，和第一种类似，但允许局部功能形变或放大比列显示主要。
优点：能铺满屏幕，突出主次
缺点：要支持形变，额外处理量

image.png

处理上1，2，3依次复杂化