大屏页面自适应

Question

背景：项目最终展示在4 x 3的拼接大屏上（横向4块，纵向3块，每块分辨率为1440 x 1050），设计稿也是根据这个尺寸设计的。但开发时是在pc电脑上开发，并且也要适应pc电脑（1366 x 768 或 1920 x 1080）。

疑问：页面中的宽度、高度、位置、字体大小怎么设置能自适应了？大家在开发大屏项目的时候是怎么去做自适应的呢？（尝试过用vw的作为单位，但在pc上显示太小了，所以又考虑加上min-width来适应pc。）

Answer 1

使用100%布局，如果最终只适用于大屏 还得在大屏上做适配

Answer 2

使用 Flex 或者 Grid 布局。
其他的比如需要固定高度、宽度或字体的，建议采取倍值相关的单位，比如 rem。

Answer 3

为了多适配美观的情况下，必须独立写样式。

如果是以一端适配美观的情况下，可以考虑缩放方案。也就是你之前的vw方案。楼上的百分比也是缩放方案这样。

flex的方案也解决不了问题。其实就是栅格布局。主要是大屏12块一行小屏两块一行。

其实你可以想成电脑是手机，大屏是电脑。对于一些文案少的展示页（fullpage，一屏，一个图加一段话）其实还好，对于真正在用的页面来说，还是需要单独适配的。