沈阳专业网站优化SEO服务_辽宁初衷网络科技有限公司

沈阳SEO > 网页设计 > / 正文

响应式网站的布局设计怎么下手?

2017-11-13 网页设计

编者按:作为今年大热的设计趋势,响应式未然是设计师的标配技巧。今天阿里的同窗从响应式设计的布局类型、布局实现两方面深刻讲授,有哪些实现布局的方法,该采取何种方法,都有相称专业过细的解答,

Heyuchan :在谈响应式布局前,咱们先梳理下网页设计中整体页面排版布局,常见的重要有如下多少品种型:

布局类型:

布局实现

采取何种方法实现布局设计,也有不同的方法,这里基于页面的实现单位而言,分为四品种型:固定布局、可切换的固定布局、弹性布局、混杂布局。

固定布局:以像素作为页面的基础单位,不论设备屏幕及阅读器宽度,只设计一套尺寸;

可切换的固定布局:同样以像素作为页面单位,参考主流设备尺寸,设计多少套不同宽度的布局。通过设别的屏幕尺寸或阅读器宽度,抉择最适合的那套宽度布局;

弹性布局:以百分比作为页面的基础单位,能够适应一定范畴内所有尺寸的设备屏幕及阅读器宽度,并能完善应用有效空间展示最佳后果;

混杂布局:同弹性布局相似,能够适应一定范畴内所有尺寸的设备屏幕及阅读器宽度,并能完善应用有效空间展示最佳后果;只是混杂像素、跟 百分比两种单位作为页面单位。

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

其中可切换的固定布局的实现本钱最低,但拓展性比拟差;而弹性布局与混杂布局后果具响应性,都是比拟幻想的响应式布局实现方法。只是对不同类型的页面排版布局实现响应式设计,须要采取不必的实现方法。通栏、等分构造的合适采取弹性布局方法、而对非等分的多栏构造往往须要采取混杂布局的实现方法。

布局响应答页面进行响应式的设计实现,须要对雷同内容进行不同宽度的布局设计,有两种方法:桌面优先(从桌面端开端向下设计);移动优先(从移动端向上设计); 无论基于那种模式的设计,要兼容所有设备,布局响应时不可防止地须要对模块布局做一些变更(产生布局转变的临界点称之为断点), 咱们通过JS获取设备的屏幕宽度,来转变网页的布局,这一进程咱们能够称之为布局响应屏幕。常见的重要有如下多少种方法:

布局不变,即页面中整体模块布局不产生变更,重要有:

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

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

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

布局转变,即页面中的整体模块布局产生变更,重要有:

模块地位变换;

模块展现方法转变:暗藏-开展;

模块数目转变:删减-增添;

许多时候,单一方法的布局响应无奈满意幻想后果,须要联合多种组合方法,但准则上尽可能时坚持简略轻盈,而且统一断点内(产生布局转变的临界点称之为断点)坚持同一逻辑。否则页面实现得太过庞杂,也会影响整体体验跟页面机能。

Tags:

更多响应式网站的布局设计怎么下手?的相关文章

网站分类
标签列表