对网站响应式布局的解读

响应式网站的概念

Responsive design,意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。

通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。布瑞恩关于响应式网站的倡议,可以追溯至2015年官网链接:

https://www.brain-info.com/H5-xiangzhan.html

关于响应式布局,请查看百度百科词条:

https://baike.baidu.com/item/%E5%93%8D%E5%BA%94%E5%BC%8F%E5%B8%83%E5%B1%80

响应式网站实现的原理和方法

响应式布局等于流动网格布局,而自适应布局等于使用固定分割点来进行布局。

自适应布局给了你更多设计的空间,因为你只用考虑几种不同的状态(比如PC端和手机端,小于768像素以下宽度统一执行手机端代码)。而在响应式布局中你却得考虑上百种不同的状态,随时计算屏幕的宽度和显示分配的列宽。虽然绝大部分状态差异较小,但仍然也算做差异。它使得把握设计最终效果变得更难,同样让响应式布局更加的难以测试和预测。这算是响应式布局美的所在。

为了应用响应式 Web 设计,需要创建一个包含适应各种设备尺寸样式的 CSS。一旦页面在特定的设备上加载,该页面上使用了各种字体和 Web 开发技术,比如媒体查询(Media Queries),此时,会先检测设备的视口大小,然后加载特定于设备的样式。

这样,原有的CSS代码量就会成倍增加。为了编写和维护便捷,开发人员大多数情况下使用HTML前端开发框架,常用的开发框架有以下若干种:

  • Bootstrap
  • HTML5 Boilerplate
  • Foundation
  • Ulkit
  • HTML5 KickStart
  • Gumby
  • Groundwork
  • Base
  • Less Framework

常见的响应式布局方式

缩放、流式布局与响应式

缩放布局,旨在相对缩放每一个元素。它们会随着窗口大小变化动态缩放内容,就这方面而言,它们是响应式的。布局本身保持静止,通过改变每一个元素来保持一致的表现。

不同分辨率下缩放布局的样子
缩放布局

图中可以看到缩放布局在不同分辨率下页面的样子,这种设计为了统一牺牲了易读性。

流式布局

流式布局随着窗口尺寸缩放容器元素。通过em这类相对单位可以做到这点,克服了缩小文字的问题。用户主动缩放时,设计就被破坏了。

不同分辨率下流式布局的例子,这种设计为了易读性牺牲了一些
响应式布局
响应式布局在不同分辨率下的例子

响应式设计不会缩放任何东西。相反,它会根据窗口尺寸决定显示哪些内容。

通过使用响应式布局框架可以快速部署很多优质网页项目。

响应式布局,其实是一种折中的策略,比较经济的选择。使用响应式布局的网页,代码量会比较大,这是一点点缺点,但是它带来的网页浏览体验改善是很明显的。