前端面试题：自适应是响应式么？

很多从事前端开发的小伙伴们在工作了一段时间后，就会产生跳槽的想法。去新的公司尝试不同的项目开发，前端架构以及更高的薪资。但想要跳槽跳得好，面试这一关的准备工作是必不可少的，因此我们要学会如何去面试，积累一些必要的前端面试经验，才能沉着的应对面试官的提问。

首先，响应式和自适应最为关键的区别是什么呢？

简而言之，响应式就相当于液体，它可以自动适应不同尺寸的屏幕，无论你的设备尺寸多么奇葩。响应式使用CSS media queries的方法，根据目标设备自动改变风格如显示类型,宽度、高度等，这能很好解决不同屏幕尺寸的显示问题。

而自适应设计是基于断点使用静态布局，一旦页面被加载就无法再进行自动适应，自适应会自动检测屏幕的大小来加载适当的工作布局，也就是说，当你要采用自适应设计网站时，你得一个一个设计6种常见的屏幕布局。

例如320、480、760、960、1200、1600。

自适应设计指能使网页自适应显示在不同大小终端设备上新网页设计方式及技术。

响应式是包含了自适应在内的，使用了@media媒体查询，在不同尺寸为网站写了一套代码。比如一个图片列表形式的网页，在屏幕宽度大于1200像素，则6张图片并排在一行，在PC端的尺寸下查看是正好的，效果如下：

如果屏幕宽度在600像素到1200像素之间，则6张图片分成两行，效果如下：

如果屏幕宽度在600像素以下，则6张图片分成三行，效果如下：

通俗的说，自适应网页设计也是响应式网页设计，响应式网页设计也是自适应网页设计。但是真正的细分起来，自适应只是响应式的一个子集。

响应式设计可以一个网站兼容多个不同终端

响应式网页设计优势：流体网格的网站适合响应式网页设计。

1、灵活性强，可以适应不同分辨率的设备

2、方便快捷的解决多设备显示适应问题

自适应网页设计优势：固定断点的网站适合自适应网页设计。

1、实施起来代价更低，测试更容易

2、自适应布局可以让设计更加可控，因为其只需要考虑几种状态就可以了

虽然响应式/自适应网页设计会带来兼容各种设备工作量大、代码累赘、加载时间长的缺点，但它们能“一次设计，普遍适用”，可以根据屏幕分辨率自适应以及自动缩放图片、自动调整布局，这些不只是技术的实现，更多的是对于设计的全新思维模式。

问：如何在实际项目中选择响应式设计或自适应设计？

答：选择取决于项目需求和目标用户群体。响应式设计适用于通用性强、维护成本相对较低的项目。自适应设计适合对用户体验要求较高、有预算支持的项目。

很大程度上还取决你是现有的网站还是一个新项目。响应式设计已成为首选的设计技术和思想，现在有1/8的网站采用响应式设计（虽然这数字不及自适应设计）。响应式设计增长迅猛，几乎已经达到作为独立移动网站的相同水平。

记住这点，如果仅仅是考虑屏幕的兼容问题，可以有把握的说，那响应式设计通常是首选技术。

然而，如果客户和公司存在预算，自适应设计可能是更好的选择。根据Catchpoint进行的一个测试，他们在Wordpress创建两个网站，一个使用标准的WP TwentyFourteen响应式主题,另一个使用一个名为Wiziapp的插件。

插件基于他们访问该网站的设备向用户提供了移动主题，还提供了高级的配置选项，这样就可以进一步简化整个流程。

原创文章，作者：guozi，如若转载，请注明出处：https://www.sudun.com/ask/88471.html