引言

由于移动端的崛起,为了自动适应不同的移动设备的各种浏览器分辨率和现实效果,出现了响应式网站的布局。响应式布局可以为不同的终端用户提供更加舒适的界面和更好的用户体验。

6.jpg

一、响应式布局是什么?

响应式布局,称为Responsive Web Design。它是将已有的开发技巧(弹性网格布局、弹性图片、媒体和媒体查询)整合起来,针对任意设备对网页内容进行“完美”布局的一种显示机制。是一个网站能够兼容多个终端(手机、Pad、电脑)的布局方法,不需要为每个终端书写一套特定版本的代码。

5.jpg

二、做响应式页面的条件是什么?

1.页面布局具有规律性,必须建立灵活的网格基础,元素宽高可用百分比代替固定数值。

2.网页图片必须是可伸缩的(页面中图片不固定宽/高)。

三、响应式的布局

3.1布局类型

图片1.png

3.2布局实现

111.jpg

1.固定布局

以像素作为页面的基本单位,不管设备屏幕及浏览器宽度,只设计一套尺寸。

2.弹性布局

以百分比作为页面的基本单位,可以适应一定范围内所有尺寸的设备屏幕及浏览器宽度,并能完美利用有效空间展现最佳效果。

3.混合布局

同弹性布局类似,可以适应一定范围内所有尺寸的设备屏幕及浏览器宽度,并能完美利用有效空间展现最佳效果,只是混合像素、和百分比两种单位作为页面单位。

3.3三大布局的特点

uisdc-xy-20191114-91.jpg

3.4响应式常见变化形式

1.布局不变,即页面中整体模块布局不发生变化。

主要有:

模块中内容:挤压-拉伸;

模块中内容:换行-平铺;

模块中内容:删减-增加;

xys201503045.png

xys201503046.png

xys201503047.png

2.布局改变,即页面中的整体模块布局发生变化。

主要有:

模块位置变换;

模块展示方式改变:隐藏-展开;

模块数量改变:删减-增加;

xys201503048.pngxys201503049.pngxys2015030410.png

很多时候,单一方式的布局响应无法满足理想效果,需要结合多种组合方式。但原则上尽可能时保持简单轻巧,而且同一断点内(发生布局改变的临界点称之为断点)保持统一逻辑。否则页面实现得太过复杂,也会影响整体体验和页面性能。

3.知识拓展

1.什么是媒体查询和断点?

媒体查询:前端工程师是实现断点的一种方法。简单的方法来获取不同设备的特征,例如设备的宽度/高度,窗口的宽度/高度,设备的手持方向,分辨率等。

断点:用浏览器打开一个响应式网站,检查元素,右上角会显示视窗当前的分辨率,慢慢缩小视窗的宽度,找到页面布局的变化点,就是我们上面说到的断点或者次断点。

2.应该如何选择断点?

断点的设置一定是基于页面具体内容,并参考网站用户的设备分辨率数据。设计过程中在一定区间内拉升或压缩,已经无法用相同的布局内容时,必须改变内容展现方式时,而产生的关键尺寸的节点。

需要注意的是,在选择断点时,不应选择将断点设置为与某些常见设备宽度相同,而是应该确保常见设备宽度能够很简单地落入到某一设计范围之内。可以在各类设备上对设计进行测试并以此来调整断点。

结语

远齐科技基于成熟的软件架构、互联网、物联网、大数据、人工智能等技术构建面向未来的集成开发平台系统。在自有集成开发平台基础上,基于最佳业务实践开发出丰富的软件功能模块、业务系统,为企业提供高效的定制化开发服务。

关键词:响应式布局

上一篇:想要设计出好的APP界面,应该注意哪些细节? 下一篇:为什么说Web开发的未来在于组件?