响应式网站的网页设计

1. 响应式网站设计方式:固定布局

网站设计都是以像素为单位的。不管什么电脑或者移动显示,都只需要设计一套尺寸出来。

而这其中,可切换的布局也是以“像素”为页面单位的,通常参考我们常用的设备的尺寸进行设计,需要设计几套针对不同尺寸的布局,挑选出最适合的一套布局方式。

 

2. 响应式网站设计方式:弹性布局。

如果我们以百分比来做页面的单位的话,不同于固定布局,这样就可以适应大部分的显示器的浏览需求。还能更好的利用页面的比例,展现最好的效果。

 

3. 响应式网站设计方式:混合布局。

混合布局和2.基本相似。适应性也很强。还能兼容1.的效果,所以叫混合布局了,只是操作起来,略麻烦一些。

 

就目前而言,以上三种方式都是现在响应式网站最常用的方式。

而我们实现起来成本最低的是可以切换的固定布局,这样的方式。但是他的缺点是,拓展性差;但是针对不同的网页,在设计的响应式页面的时候,需要采用不同的方式。比如:通栏、等分结构的比较实用的方式,是弹性布局方式。但是对于弹性布局方式而言,非等分的多栏结构常常会用到混合布局的方式进行实现。

 


布局响应

 

我们不管用什么方式做网页设计,目的都是要兼容所有设备的,而“布局相应”时无法避免的,会对模块布局做一些变化(这种情况下,布局发生了改变的临界点,我们一般叫做“断点”)。在实际操作中,我们会用JS来获得设备的屏幕宽度,用来为改变网页布局做一个数据参数,这样的过程被我们称作布局响应屏幕。

 

网页设计中常见的,页面中整体模块布局不发生变化的主要有:

模块中内容:

1.挤压-拉伸;

2.换行-平铺;

3.删减-增加;

 

而布局改变时,也就是说,网页里的模块布局发生了变化的时候,主要有:

1.模块位置变换;

2.模块展示方式改变:隐藏-展开;

3.模块数量改变:删减-增加;

 

但是大部分时候,仅仅使用一种方式布局没有办法满足设计师和客户需要的效果,但是,需要在原则上保证网页是简单和轻巧的,并且同一断点内保持逻辑统一。要不然网页实现起来就会太过于复杂,同时也会影响到整体的交互体验和网页的性能。

响应式网站的网页设计

响应式网站设计时用什么方式实现布局设计,都是有不同方式的,这里我们把他们分成4中:固定布局、可切换的固定布局、弹性布局、混合布局。


发布日期:2019-09-02

相关建站资讯




北京优艺客文化传播有限公司

地址:北京市建外SOHO东区2号楼

ICP备案号:京ICP备12019481号

邮箱:touch@uelike.com

电话:13521043455

邮编:101100

客服QQ:123456789

自助建站

微信公众号建站帮助

扫描二维码分享到微信

在线咨询
联系电话

13521043455