测验

响应式设计与自适应设计有何不同?

主题
CSS
在GitHub上编辑

响应式设计和自适应设计都试图优化不同设备上的用户体验,针对不同的视口大小、分辨率、使用上下文、控制机制等进行调整。

响应式设计基于灵活性原则——一个可以在任何设备上看起来都不错的单一流畅网站。响应式网站使用媒体查询、灵活的网格和响应式图像来创建一种用户体验,这种体验会根据多种因素进行调整和改变。就像一个球变大或变小以适应几个不同的圆环。

自适应设计更像是渐进增强的现代定义。自适应设计不是一个灵活的设计,而是检测设备和其他功能,然后根据预定义的一组视口大小和其他特征提供适当的功能和布局。该网站检测所使用的设备类型,并为该设备提供预设的布局。与其让一个球穿过几个不同大小的圆环,不如根据圆环的大小使用几个不同的球。

这两种方法都有一些需要权衡的问题:

  • 响应式设计可能非常具有挑战性,因为您本质上是使用一个单一的(尽管是响应式的)布局来适应所有情况。如何设置媒体查询断点就是一个这样的挑战。您是使用标准化的断点值吗?或者,您是使用对您的特定布局有意义的断点吗?如果该布局发生变化怎么办?
  • 自适应设计通常需要用户代理嗅探或 DPI 检测等,所有这些都可能被证明是不可靠的。
在GitHub上编辑