前端小白 UI 设计之惑？

[bigxianyu]

现在的手机有各种的设备，不同的大小，不同的分辨率，而设计师出的设计稿是基于某一个大小的，那其它机型的手机怎么适配，也需要让设计师都出一份 UI 吗？要不然感觉 UI 设计稿没啥用途，直接用默认的一些居中，对齐，是不是就可以搞定（ 没有 100%还原的情况 )

[fixbug]

可以参考 https://youzan.github.io/vant/#/zh-CN
对于页面中通用的元素统一 UI 设计规则，例如： 一样的 border ，boxShow... 其他就是自适应了
个人感觉，UI 的设计主要是整体页面的风格

[learnshare]

这就是 UI 设计与开发之间的 Gap
这些 Gap 通常是需要开发去思考并处理的

任何 UI 都可以拆分为一个个矩形区域，矩形自身以及矩形之间的各种尺寸就是你可以灵活处理的部分

[IvanLi127]

UI 出给前端的标注稿应该标注如何适应其他屏幕，并且不是全标多少 px 就行的。有默契的可以省略。在同条件下 100 % 还原就好了，其他的条件下，100 % 的标杆都没有，肯定谈不上 100 % 还原了。

[lisianthus]

我们这边是用 rem 来适配其他尺寸的，前端用 js 基于设计稿宽度动态设置根元素的 fontSize ，然后就可以直接在 css 照着设计稿写样式了。
比如定 375px 为标准宽，那么根元素 fontSize 就是 document.body.clientWidth / 375 * 100 px ，为了方便在 css 里写 px 而不是 rem ，可以用 postcss 插件实现 px 转 rem

[foufoufm]

现在设计师对前端研发还原度的需求就是：只要你不是太离谱一般不会来挑你刺。

[morize]

移动端的话绝大多数就是等比缩放吧，顶多再设置一个上限与下限。
有些特殊元素可能是固定大小。

看似复杂，但这部分反而是设计稿里最不需要关心的...

不如想想屏幕的宽度不同，对于展示效果会产生什么影响，如何解决溢出、距离计算、热区控制等... 都是在设计稿上看不出来的，这些细微之处决定了最终成品的质量。

[Aloento]

我这边是出 PC 端的高保真，然后如果有必要会出一个移动端的低保真，因为移动端偶尔还是需要定制化的，自适应也没有那么强大