knowledge

还原设计稿

目录

1. 适配布局（与设计师协作思路）
2. 各端还原设计稿方案（响应式方案）

---

适配布局（与设计师协作思路）

1. 选择一种尺寸（宽度）作为设计和开发基准。

   1. 移动端，根据设计规范或市面上机型的分辨率情况，如：iOS可选375、Android可选360，或均选择375。
   2. PC端，750px或1080px等的设计稿

2. 定义一套适配规则，自动适配设计稿宽度以外的尺寸：

   1. 使用（类似）flex布局

      1. 左右布局

         保证宽度横向铺满自适应。

         1. 判断出设计稿的某些节点是固定宽度（如：图片、明显不是自适应的部分）
         2. 另一部分拉伸填满空间

      2. 居中、栅格系统

   2. 针对padding、margin、border、font-size、图片、等，一般写死数值、不自适应变化。

   3. 特殊情况需要像素级还原设计稿：

      1. 按设计稿和设备视口比例进行换算：设计稿中某长度 * (设备视口宽度 / 设计稿总宽)。
      2. 可以设置最大放大倍数，如：设计稿中某长度 * Math.min(设备视口宽度 / 设计稿总宽, 480 / 375)
   • 响应式页面解决方案

3. 特殊适配效果给出设计效果 或 按照开发习惯，特殊处理。

   如：仅针对某些机型、某些系统、某些版本的特殊样式效果。

   1. 针对设计稿中需要一屏内展示完全的内容（如：弹窗），注意宽/长>某个小数时（如：横屏、折叠屏展开、长宽比接近1的设备）的处理方案（需针对具体的设计稿进行代码特殊处理）：

      1. 整个内容可滚动

         参考：Ant Design: modal实现。

      2. 内容的部分可自适应滚动

      3. 同时满足高宽都在一屏内的变化比例

         如：设计稿中某长度 * Math.min(设备视口宽度 / 设计稿总宽, 设备视口高度需要占用量 / 设计稿该内容高度)

各端还原设计稿方案（响应式方案）

可参考：手机屏幕尺寸大全

1. iOS屏幕宽度pt： 1. 320：iPhone SE(1st) 2. 375：iPhone 11 Pro（iPhone 12/13 Mini的渲染像素的逻辑像素的宽度也是375） 3. 390：iPhone 13 Pro 4. 393：iPhone 14 Pro 5. 414：iPhone 11 Pro Max 6. 428：iPhone 13 Pro Max 7. 430：iPhone 14 Pro Max 2. Android屏幕宽度dp： 320、360、392、411、480，还可以在开发者设置里指定屏幕宽度。

1. iOS

   iPhone宽度pt：320、375、390、414、428；iPad宽度pt：768+。

   （约定）375（无单位）总宽，保证资源（图片）有@2x图、@3x图。利用相对布局（flex布局）。

2. Android

   各机型的dp总宽度范围很广，主要有：320~480、800+，最多的是360。

   （约定）360dp总宽，保证资源（图片）有1x图、1.5x图、2x图、3x图、4x图。利用约束布局（flex布局）。

设备根据分辨率情况，去选择对应的N倍图，若取不到则自动降级取低倍图。

• 设备无关的逻辑像素，能够像素级还原设计稿

  1. 小程序

     默认配置规定屏幕总宽为750rpx。

  2. iOS、Android、React Native、Hippy、Flutter（可利用flutter_screenutil）

     按设计稿和设备视口比例进行换算，如：设计稿中某长度 * 设备视口宽度 / 设计稿总宽、等。

  3. 前端页面

     px不是响应式。

     rem+vw。

This site is open source. Improve this page.