随着智能手机、平面电脑的发展，越来越多不同尺寸的平面出现，传统的网页布局设计难以满足在不同尺寸设备中的展示需求，响应式网页设计就应运而生。下面，成都UI设计公司的小编就给大家分享介绍一下响应式网站界面设计的规则和原理。

一、响应式布局规则

响应式布局的规则并不是特别复杂，只要注意两个问题：分段响应规则和组件宽度适应。

1、分段响应规则

响应式的响应，面向的核心对象是浏览器窗口的宽度，而不是设备类型。也就是说，响应式规则就是为页面分配不同的宽度区间，每个区间有各自展示的样式，用来应对不同的场景和设备类型，主要包括以下三种调整：

①内容增减：即部分模块在不同的分段内会有显示和隐藏的状态，尤其是一些网页端的内容觉得在小屏幕上展示会太多了，就在小屏幕场景中隐藏掉。

②布局调整：主要是模块的排列和顺序发生变化，常见的就是模块一行的列数发生改变。

③样式变更：即针对不同的分段设计完全不一样的样式，最多应用在导航栏的设计中，会为最小的分段使用 iOS 的 Tabbar 或安卓的Menu样式。

2、组件宽度适应

在拖动响应式窗口的宽度时，会发现组件的宽度也随之改动，这就是组件宽度适应。组件的宽度适应模式主要有两种类型，一种是容器宽度适应，一种是容器比例缩放，两种方式都是为了让容器中的下级元素与容器等比变动。

二、响应式设计流程

响应式界面设计要吻合编程的真实方法和需求，首先确定响应几个宽度区间，以及它们对应的数值分别是多少，然后完成对应数量页面的设计，再进一步确定同一个区间内，组件的宽度适应规则是什么样的。当全部设计稿和规则都确认完毕以后，才进入切图导出的阶段。

以上就是本次为大家分享的响应式网站UI设计介绍，响应式设计因为在框架规则上的限制，难以实现一些特殊的视觉样式，因此设计风格偏向扁平，适合用于需要简约、大气的视觉效果的网站。