技术文章|你真的能分辨自适应网页与响应式网页吗？

本文来源于阿里云-云栖社区，原文点击这里。

相信很多小伙伴对于自适应与响应式的概念还有点模糊，一般自适应这种说法比较少，相对而言，响应式的名声要大一些。事实上，自适应也是响应式的一种，因此一个自适应网站同样可以说成是响应式设计，但两者又存在一些区别。 自适应是同一个网页在不调整页面布局的前提下适应各种不同的终端设备，这里强调的是网站页面布局不发生变化，也就是可以根据屏幕尺寸调整整个网页的大小。

案例：自适应网页

可以十分清晰的看到，产品的排列方式并没有因为终端屏幕的大小而发生变化，也就是说同一个网页的基础上进行调节的过程

而响应式相对来说更智能一些，简单来说，响应式设计就是能够兼容多个终端，虽然是用一个页面，但会自动侦测屏幕大小对页面进行新的布局和调整，让用户在查看的时候更方便。

案例：H5响应式网页

可以看到PC端、平板端的产品分为四列展示，但手机端的则是两列，在保证描述清晰的前提下进行细微的页面布局调整，这就是响应式与自适应最大的区别。 两者有相交点也有不同点，从优势及适应体而言，也有一定的差异。 固定断点的网站适合自适应网页设计，第一是实施起来代价更低，测试容易；且自适应布局可以让设计更加可控。相对的流体网格的网站则适合使用响应式网页设计，因为灵活性强，可以适应不同分辨率的设备，同时也方便解决多种设备显示适应的问题。

>>>展开原文