响应式设计的优点

Posted 2021-07-05 易懂UI设计

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了响应式设计的优点相关的知识，希望对你有一定的参考价值。

响应式设计是由响应式开发所带来的设计。

诞生背景

手机屏幕尺寸多种多样，而且每年都有新机型出现，还有各种可以投影的设备也是五花八门，导致各种设备的界面适配，成了一大难题。总不能每一种设备，都设计一套切图，都开发一套代码吧。

基本原理

把单位px，dp改成单位百分百%

优点

这样改完之后，有很多优点。

工作效率方面
UI设计师只需要设计一套设计稿，标注一套标注，切图切一套2倍图，发给研发就可以。研发只需要写一套代码，就可以按照百分比去适配各种尺寸的手机屏幕。
文本方面
如果一行文本在大尺寸手机上是一行展示效果。那么在小手机上，也是一行文本的展示效果。不用担心文本一行变两行的问题。
前缀后缀方面
给可变数据的前面或者后面，添加前缀或者后缀，可以使用现成的代码组件。不用担心代码需要分开写的问题。比如：金额¥100.00元，用代码调用数字组件，【¥】和【元】，只需要在数字的组件上添加前缀和后缀的展示代码，就可以实现效果。
图片圆角方面
如果banner图片有圆角，那么设计师切图的时候，可以切直角图片给研发。研发可以用代码，给图片设置圆角弧度。
图片缩放方面
如果设置宽度为百分比，那么图片尺寸超过设定的尺寸百分比，就可以缩小到铺满为止。反之亦然。

视频讲解

下面是响应式开发的讲解视频。点击视频，打开即可收听。

以上是关于响应式设计的优点的主要内容，如果未能解决你的问题，请参考以下文章