网页设计中网页布局的主要方式有哪些?

发布来源:沙漠风网站建设公司

发布时间:2020.12.18

1、静态布局


即传统网页设计模式,只需做一套尺寸的设计稿(比如1280*800px),一旦设备分辨率宽度小于1280px,则出现横向滚动条,一旦设备分辨率宽度大于1280px,则内容居中显示,两边留白。(常见于新闻类、电商类、政府类网页),这种布局方式对设计师和前端而言是zui简单的。


2、自适应布局


可以把自适应布局看作是静态布局的一个系列。自适应布局的特点是为不同的屏幕分辨率定义固定布局,即创建多个静态布局。一个静态布局对应一个屏幕分辨率,改变屏幕分辨率可以切换不同的静态局部,但页面元素不随窗口大小的调整发生变化。简而言之就是需要自适应几个终端,就需要出几套尺寸的设计稿。


网页设计


3、弹性布局


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


4、混合式布局


混合式布局就是为不同终端设备的屏幕分辨率定义布局(适配各种尺寸的PC、手机、穿戴设备等等),在每个布局中,页面元素随着窗口调整而自动适配,混合了百分比、像素为基本单位的组合方式。可以把混合式布局看作是弹性布局、自适应布局的融合。简而言之就是只需要一套设计稿适应多个终端。


自适应布局、弹性布局、混合布局都是响应式布局方式的一种。其中自适应布局的实现成本zui低,但拓展性比较差;而弹性布局与混合布局效果都是比较理想的响应式布局实现方式。很多时候,单一方式的布局响应无法满足理想效果,需要结合多种组合方式,但原则上尽可能是保持简单轻巧,而且同一断点内(发生布局改变的临界点称之为断点)保持统一逻辑,否则页面实现太过复杂也会影响整体体验和页面性能。一般通栏、等分结构的布局适合采用弹性布局方式,非等分的多栏结构布局则需要采用混合布局的实现方式。


我所接触的网站项目几乎也都是响应式开发,显然响应式已成为网页设计的标配,而不是什么奢侈品。所以,牢牢掌握响应式布局设计规范也是ji为必要的。

TAG:
相关资讯
多一份参考,总有益处
联系沙漠风,免费获得专属定制《策划方案》及网站建设、网站设计、网站制作报价
深圳网站建设

咨询相关问题或预约面谈,可以通过以下方式与我们联系

业务热线400-611-9921大客户专线158-1856-1755

提交需求提交需求

提交需求
热线
微信扫码咨询
电话咨询
微信
业务热线
提交需求
官方微信
准备好开始了吗,
那就与我们取得联系吧
400-688-6062
有更多服务咨询,请联系我们
请填写您的需求
您希望我们为您提供什么服务呢
您的预算