WeaveFox 设计稿倍率_哔哩哔哩_bilibili

什么是缩放比例？

缩放比例（Scaling Ratio）指的是目标设备宽度与设计稿宽度之间的比例关系，用于确保不同设备上的界面显示符合设计预期。它决定了设计稿在实际设备上的呈现大小，避免界面过大或过小的问题。

缩放比例计算逻辑

1. 自动判断设计稿类型

根据设计稿宽度判断：

  • 移动端页面：设计稿宽度为375倍数，且页面高度大于页面宽度；
  • PC端页面：其它；

2. 默认缩放比例设置

自动根据设计稿宽度和目标设备宽度计算缩放比例：

公式：

  • 移动端缩放计算

缩放比例 = max(1, min(4, Math.floor(width / 375)))

  • PC端缩放计算

缩放比例 = max(1, min(2, Math.floor(width / 1024)）)

附录：常见缩放比例

设计稿宽度(px) 目标设备宽度(px) 识别设备类型 计算缩放比例 备注
375 375 移动端 1.0 典型移动端
750 375 移动端 0.5 移动端2倍稿
1500 375 移动端 0.25 移动端4倍稿
1440 1024 PC端 1.0 适配默认PC
1500 1024 PC端 1.0 适配默认PC
1920 1024 PC端 1.0 适配默认PC
2480 1024 PC端 0.5 适配PC端2倍稿