自适应布局和响应式布局的一点理解


在一次会议中突然提到了响应式布局自适应布局,疑惑了很久,感觉没区别又似乎有区别,只是实现的方式不一样?

自适应布局

2010年,Ethan Marcotte提出了“自适应网页设计”(Responsive Web Design)这个名词,指可以自动识别屏幕宽度、并做出相应调整的网页设计。

我的理解就是,根据不同的几个端(手机,ipad,pc),设计不同的独立样式,代码实现几个模板,然后根据不同的端,使用对应的模板,所以在有些网站上会出现类似m或mobile这样的前缀。

劣势:需要大量精力维护多个模板

pc端

移动端

移动端和pc端明显是两套不同的模板了。

响应式布局

响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。

就是说,一套设计的样式兼容多个端,而不是为每个端都做一个指定的版本,用一个网页布局,响应地调整布局适合用户的屏幕。最著名的响应式框架就是Bootstrap。

pc端

移动端

移动端和pc端整体布局变化不是很大,做了相关的适配,让用户享受更舒适的体验。

劣势:还是需要大量精力维护1个模板,然后适配多个端

我感觉无论是自适应布局还是响应式布局,如果需要做这种方案,ui设计师怎样都得提供多个端的ui图,而开发的工作量其实都大的。

ui框架基本都提供了栅格系统,也算是比较完善的了,在大多数情况下用remflex布局简单适配不同分辨率基本就能满足客户要求,具体问题具体分析吧。

第二次更新补充:

响应式设计和自适应设计都是网站设计中常用的技术,用于让网站在不同设备上呈现出最佳的视觉和用户体验。它们的主要区别在于设计的实现方式和灵活性。

响应式设计
响应式设计指的是一个网站可以根据不同设备的屏幕尺寸来自动适应不同的布局。响应式设计通常使用CSS媒体查询来实现,通过指定不同的CSS规则,让网站在不同的屏幕尺寸下展现出不同的布局和样式。响应式设计可以适应不同的设备,包括电脑、平板电脑和手机等,而不需要额外的代码或服务器端技术。
举例:一个响应式网站的导航栏会随着屏幕的尺寸变化而自动调整,当屏幕变小时,菜单选项可能会缩小并隐藏,以适应小屏幕设备上的浏览器。

自适应式设计
自适应式设计指的是一个网站可以在加载页面时根据设备的特征自动选择最适合的布局和样式。自适应式设计通常使用客户端侧脚本技术,如JavaScript,来识别用户设备的特征,并加载最适合的布局和样式。自适应式设计需要在设计时为不同的设备编写不同的代码,因此相对响应式设计来说,需要更多的开发工作。
举例:一个自适应网站可能会有一个特定的版本,用于智能手机和平板电脑,当用户访问网站时,客户端脚本会识别用户设备类型,然后加载相应的版本。

综上所述,响应式设计和自适应式设计都是网站设计中常用的技术,可以让网站在不同的设备上获得更好的用户体验。两者的主要区别在于实现方式和灵活性。

我的微信公众号: 梨的前端小屋


  目录