这是一个创建于 777 天前的主题，其中的信息可能已经有所发展或是发生改变。
现在的手机有各种的设备，不同的大小，不同的分辨率，而设计师出的设计稿是基于某一个大小的，那其它机型的手机怎么适配，也需要让设计师都出一份 UI 吗？要不然感觉 UI 设计稿没啥用途，直接用默认的一些居中，对齐，是不是就可以搞定（ 没有 100%还原的情况 )
 |
1
fixbug 2022-09-25 09:26:46 +08:00
可以参考 https://youzan.github.io/vant/#/zh-CN
对于页面中通用的元素统一 UI 设计规则，例如： 一样的 border ，boxShow... 其他就是自适应了 个人感觉，UI 的设计主要是整体页面的风格 |
 |
2
learnshare 2022-09-25 11:50:24 +08:00
这就是 UI 设计与开发之间的 Gap
这些 Gap 通常是需要开发去思考并处理的 任何 UI 都可以拆分为一个个矩形区域，矩形自身以及矩形之间的各种尺寸就是你可以灵活处理的部分 |
 |
3
IvanLi127 2022-09-25 12:52:14 +08:00 via Android
UI 出给前端的标注稿应该标注如何适应其他屏幕，并且不是全标多少 px 就行的。有默契的可以省略。在同条件下 100 % 还原就好了，其他的条件下，100 % 的标杆都没有，肯定谈不上 100 % 还原了。
|
 |
4
lisianthus 2022-09-25 14:38:00 +08:00
我们这边是用 rem 来适配其他尺寸的，前端用 js 基于设计稿宽度动态设置根元素的 fontSize ，然后就可以直接在 css 照着设计稿写样式了。
比如定 375px 为标准宽，那么根元素 fontSize 就是 document.body.clientWidth / 375 * 100 px ，为了方便在 css 里写 px 而不是 rem ，可以用 postcss 插件实现 px 转 rem |
 |
5
foufoufm 2022-09-25 15:08:11 +08:00
现在设计师对前端研发还原度的需求就是：只要你不是太离谱一般不会来挑你刺。
|
 |
6
morize 2022-09-25 16:41:06 +08:00
移动端的话绝大多数就是等比缩放吧，顶多再设置一个上限与下限。
有些特殊元素可能是固定大小。 看似复杂，但这部分反而是设计稿里最不需要关心的... 不如想想屏幕的宽度不同，对于展示效果会产生什么影响，如何解决溢出、距离计算、热区控制等... 都是在设计稿上看不出来的，这些细微之处决定了最终成品的质量。 |
 |
7
Aloento 2022-09-25 16:50:26 +08:00
我这边是出 PC 端的高保真，然后如果有必要会出一个移动端的低保真，因为移动端偶尔还是需要定制化的，自适应也没有那么强大
|
Select Language