Skip to content

Latest commit

 

History

History
97 lines (67 loc) · 4.68 KB

README.md

File metadata and controls

97 lines (67 loc) · 4.68 KB
Raw

还原设计稿

目录

  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. 针对强依赖计算的场景，可以设置向下取整：Math.floor(设计稿中某长度 * Math.min(设备视口宽度 / 设计稿总宽, 480 / 375))。

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

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

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

      1. 整个内容可滚动

        参考：Ant Design: modal实现。

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

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

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

    2. （如：横竖屏切换、折叠屏切换、等）设备视口变化需要重新渲染

      1. 前端监听客户端事件

        Native判断手机状态变化，通知前端根据新的视口高宽计算渲染。

      2. 客户端直接销毁-重启前端视图

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

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

  1. iOS屏幕宽度pt：

    1. 320：iPhone SE(1st)
    2. 375：iPhone 11 Pro（iPhone 12 Mini/13 Mini的渲染像素的逻辑像素的宽度也是375）
    3. 390：iPhone 14
    4. 393：iPhone 14 Pro
    5. 414：iPhone 11 Pro Max
    6. 428：iPhone 14 Plus
    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。

      rpx（responsive pixel，响应单位）是微信小程序独有的、解决屏幕自适应的尺寸单位，可以根据屏幕宽度进行自适应，不论大小屏幕，规定屏幕宽为750rpx（类似CSS的100vw）。

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

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

    3. 前端页面

      px不是响应式。

      rem+vw。