大屏适配的几种方式

大手蠢屏适配的几种方式主要包括以下几种：

rem方案：
- 核心原理：根据不同屏幕大小动态调整html根节点的fontsize。
- 优点：相对简单，能够较好地适应不同屏幕尺寸。
vw/vh方案：
- 核心原理：使用视口宽度和视口高度作为单位，依据设计稿计算相对百分比。
- 优点：直接基于视口尺寸，适应性更强，无需额外计算。
scale方案：
- 核心原理：根据设计稿的分辨率进行缩放。
  - 按宽度缩放：根据屏幕宽度调整整体缩放比例。
  - 动态计算宽高比：根据屏幕的实际宽高比，决定是根据宽度还是高度进行缩放，以更好地适应不同比毕历陪例的屏幕。
- 优点：能够保持设计稿的原始比例，避免元素变形。
相关开源组件库：
- autofit.js：
  - 原理：基于比例缩放原理，动态调整容器的宽度和高度以实现全屏填充。
  - 优点：简单有效，适合需要在不同分辨率和屏幕尺寸下保持布局一致性的应用场景。
- vscalescreen：
  - 原理：大屏自适应容器组件，可根据宽度、高度、宽高等比例或全屏进行自适应。
  - 优点：适用于大屏项目开发，支持多种自适应方式。
- FitScreen：
  - 原理：基于缩放的大烂扮屏自适应解决方案，根据设计草图的像素尺寸进行缩放适配。
  - 优点：支持vue2、vue3及react，适用于任何框架，只需少量代码。

以上方式各有优缺点，开发者可根据具体需求和项目特点选择合适的大屏适配方案。

热门标签