柏庆网络微信公众号
柏庆网络微博
咨询热线:0755-8886 8991
咨询邮箱:boonet@boonet.cn
您的位置:首页 > 新闻动态> 网站百科 > 查看内容
什么是响应式布局网站
发表日期:2018-05-19 11:23:14    文章编辑:柏庆网络    文章来源:南山网站建设    浏览次数:306

一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。


响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验,而且随着目前大屏幕移动设备的普及,用“大势所趋”来形容也不为过。随着越来越多的设计师采用这个技术,我们不仅看到很多的创新,还看到了一些成形的模式。


在谈响应式布局前,红悦网络先梳理下网站设计中整体页面排版布局,常见的主要有如下几种类型:

 

布局实现


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

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

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


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

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

 

布局响应


对页面进行响应式的设计实现,需要对相同内容进行不同宽度的布局设计,有两种方式:桌面优先(从桌面端开始向下设计);移动优先(从移动端向上设计);

无论基于那种模式的设计,要兼容所有设备,布局响应时不可避免地需要对模块布局做一些变化(发生布局改变的临界点称之为断点),


我们通过JS获取设备的屏幕宽度,来改变网页的布局,这一过程我们可以称之为布局响应屏幕。常见的主要有如下几种方式:


布局不变,即页面中整体模块布局不发生变化,主要有:


1.模块中内容:挤压-拉伸;  2.模块中内容:换行-平铺;  3.模块中内容:删减-增加;


如没有注明,文章为柏庆网络原创,转载时请注明来源 http://nanshan.boonet.cn/article-13-1.html
最新新闻
相关新闻

Hi,Are you ready?

准备好开始了吗?
那就与我们取得联系吧

有网站建设的项目想和我们谈谈吗?您可以填写右边的合作意向表格,让我们了解您的项目需求,这是一个良好的开始,我们将会尽快与你取得联系。当然也欢迎您与我们在线商务沟通或打电话咨询,让我们听到你的声音!

BOONET 柏思网络

业务热线:0755-33889986

E-mail:boonet@boonet.cn

您需要的服务

现有网站改版
我需要做微信营销
建设全新的企业网站
要找长期合作公司,需要年度服务
我需要做购物商城
我需要做系统平台

您最关注的地方

对功能要求比较高
对设计创意要求比较高
需要可以购物支付
搜索引擎排名

预算

4-6千 1万-3万 4万-6万 7万以上 项目需要招标

关闭

关闭
咨询·联系

咨询热线

0755-88868991

微信公众号