关于网站建设中经常使用的布局方式的一些思考

Blog 1

自适应布局

 
自适应布局是网页内容根据设备的不同而进行适应;
 
通过检测视口分辨率,来判断当前访问的设备是pc端、平板还是手机,从而请求服务层,返回不同的页面;
 
需要根据不同使用场景开发多套界面。
 

技术原理

 
分别为不同的屏幕分辨率定义布局,即创建多个静态布局,每个静态布局对应一个屏幕分辨率范围。改变屏幕分辨率可以切换不同的静态局部(页面元素位置发生改变),但在每个静态布局中,页面元素不随窗口大小的调整发生变化。 布局特点:屏幕分辨率变化时,页面里面元素的位置会变化,而大小不会变化。 设计方法:使用媒体查询给不同尺寸和介质的设备切换不同的样式,在同一个设备下实际还是固定的布局。
 

响应式布局

 
响应式布局是网页的布局针对屏幕大小的尺寸而进行响应;通过检测视口分辨率,针对不同客户端在客户端做代码处理,来展现不同的布局和内容;只需要开发一套界面即可适用于所有尺寸及终端。
 

技术原理

 
糅合了流式布局+弹性布局,再搭配媒体查询技术使用。分别为不同的屏幕分辨率定义布局,同时,在每个布局中,应用流式布局的理念,使页面元素宽度随着窗口调整而自动适配。即:创建多个流体式布局,分别对应一个屏幕分辨率范围。可以把响应式布局看作是流式布局和自适应布局设计理念的融合。 布局特点:每个屏幕分辨率下面会有一个布局样式,即元素位置和大小都会变。 设计方法:媒体查询+流式布局。通常使用媒体查询和网格系统配合相对布局单位进行布局,实际上就是综合响应式、流动等技术通过 CSS 给单一网页不同设备返回不同样式的技术统称。
 

设计策略

 
01、精简并优化导航体系
 
以Ant Design为例,主导航收起,因为页面中的副导航内容丰富且包含多级子类目,故将其设置为悬浮按钮,以抽屉样式展开。
 
02、移除不必要的特效
 
PC端的悬停动效、视差滚动等特效在移动端可直接移除。
 
03、合理的字体排版
 
字体大小、行距需根据移动端阅读感受调整至舒适的版式,确定合理的PC-移动端样式映射关系。
 
04、控件排布关系可进行调整
 
PC端横向排布的控件,可以在移动端横向排布,但需要注意层级关系保持一致。
 
05、优化按钮或可点击元素的位置及热区大小保证移动端按钮或可点击元素位置易于操作、操作热区大小合理,以保证操作准确性。
 
06 复杂任务向PC转移移动端有着其自身的局限性,从而导致复杂性较高的任务很难完成,此时可以把复杂性转移到PC端,提供明确路径,引导用户前往PC完成。

以上多种布局都可以应用在扬州网站建设上,具体要看情况来选择合适的方式。