作为今年热门的设计潮流,响应式设计已经成为设计师的标准技能。今天,赤兔云从布局类型和布局实施的响应性设计上进行了深入的讲解。他们都有相当专业和详细的答案,如何实现布局,采取什么方式,

在讨论响应式布局之前,让我们先梳理一下网页设计中的整体页面布局。常见类型如下:

布局类型:

实现布局设计的方法有很多种。这里,基于页面的实现单元,有四种类型:固定布局、可切换固定布局、灵活布局和混合布局。

固定布局:

像素作为页面的基本单元,无论设备屏幕和浏览器的宽度如何,只设计一套大小;

可切换固定布局:

同像素为页面单元,参照主流设备尺寸,设计出几种不同宽度的布局。通过设置不同的屏幕大小或浏览器宽度来选择最合适的宽度布局;

灵活布局:

以百分比为页面的基本单元,能适应一定范围内设备屏幕和浏览器宽度的所有大小,并能利用有效空间来显示效果;

混合布局:

类似弹性布局,它能在一定范围内适应设备屏幕和浏览器的各种尺寸,并能利用有效空间来显示效果;只需将像素和百分比混合为页面单位即可。可切换固定布局、灵活布局和混合布局是目前可采用的所有响应式布局模式。

可切换固定布局的实现成本,但扩展性差;灵活布局和混合布局是实现响应布局的理想方式。只有针对不同类型的页面布局实现响应性设计,我们需要使用不同的实现方法。柔性布置适用于跨柱、等柱结构,而非等柱结构则常采用混合布置。

实现页面响应设计的方法有两种:桌面优先(从桌面到底部);对于相同内容,布局响应需要不同的宽度布局设计;移动优先级(从移动终端到终端设计);无论设计模式是基于哪种,要与所有设备兼容,都不可避免地对模块的布局进行一些更改(布局更改的关键点称为断点)。我们通过JS获取设备的屏幕宽度,以改变网页的布局。这个过程可以称为布局响应屏幕。常见方法如下:

1、布局不会改变,即整体模块布局不会更改

2、模块内容为挤压拉伸;

3、模块内容:线进料-瓷砖;

4、模块内容为:删除-添加;

5、布局更改,即页面中模块的总体布局发生变化

6、模块显示模式变更:隐藏展开;

7、修改模块数:删除-增加;

在很多情况下,单一的布局响应方式不能达到理想的效果,因此需要多种组合方式的组合,但原则上应尽量简单、轻便,而同一断点(布局变化的临界点称为断点)应保持统一的逻辑。否则,页面的实现过于复杂,也会影响整体体验和页面性能。