·您现在的位置： 云翼网络 >> 文章中心 >> 网站建设 >> 网站建设问答 >> 布局专攻文！如何搞定响应式网页的布局设计？

【如有意向点此提交需求】关于我们

布局专攻文！如何搞定响应式网页的布局设计？

作者：佚名      网站建设问答编辑：admin      更新时间：2022-07-23

xys201503041

编者按：作为今年大热的设计趋势，响应式已然是设计师的标配技能。今天阿里的同学从响应式设计的布局类型、布局实现两方面深入讲解，有哪些实现布局的方式，该采用何种方式，都有相当专业细致的解答，不多说，来收！

Heyuchan ：在谈响应式布局前，我们先梳理下网页设计中整体页面排版布局，常见的主要有如下几种类型：

布局类型：

xys201503042

布局实现

采用何种方式实现布局设计，也有不同的方式，这里基于页面的实现单位而言，分为四种类型：固定布局、可切换的固定布局、弹性布局、混合布局。

固定布局：以像素作为页面的基本单位，不管设备屏幕及浏览器宽度，只设计一套尺寸； 可切换的固定布局：同样以像素作为页面单位，参考主流设备尺寸，设计几套不同宽度的布局。通过设别的屏幕尺寸或浏览器宽度，选择最合适的那套宽度布局； 弹性布局：以百分比作为页面的基本单位，可以适应一定范围内所有尺寸的设备屏幕及浏览器宽度，并能完美利用有效空间展现最佳效果； 混合布局：同弹性布局类似，可以适应一定范围内所有尺寸的设备屏幕及浏览器宽度，并能完美利用有效空间展现最佳效果；只是混合像素、和百分比两种单位作为页面单位。

xys201503043

可切换的固定布局、弹性布局、混合布局都是目前可被采用的响应式布局方式。