共计 752 个字符，预计需要花费 2 分钟才能阅读完成。
依据日常开发教训及网上相干材料，用简略通俗易懂的大白话剖析 自适应 跟响应式 的区别。注：本文只剖析自适应跟响应式的区别以及理解其由来的背景，不在于探讨其应用的办法
一、什么是自适应布局
自适应布局就是宽度自实用布局，在不同大小的设施上，网页以等比例的模式缩放宽度，出现同样的主体内容和排版布局
自适应布局演示图
随着屏幕宽度缩放，网页内容也以等比例缩放，不论屏幕宽度为多少，网页主体排版布局总是一样的
二、什么是响应式布局
响应式布局就是依据屏幕大小变动，页面的内容排版布局会主动调整变动，已出现更好的用户体验
响应式布局演示图
随着屏幕宽度的缩放，页面做出相应调整，布局和展现的内容会有所变动
1. 自适应布局呈现的背景
在 PC 时代初期，网页设计者都会设计固定宽度的页面，最开始的电脑显示器分辨率品种不多，因为过后电脑原本就少。起初随着显示器品种越来越多，以及笔记本、平板电脑的遍及，这种固定宽度的页面呈现了问题。于是呈现了一种新的布局形式，宽度自适应布局。咱们平时议论的自适应布局，大多指的就是宽度自适应布局
再到起初，互联网大战从 PC 打到了手机，还有 HTML5 规范的公布。自适应布局也从 PC 延长到手机，自适应布局也因而火了起来，成为网页设计的必要需要
2. 响应式布局呈现的背景
自适应尽管成为网页设计的必要需要，但还是暴露出一个问题，如果屏幕太小，即便网页内容可能依据屏幕大小进行适配，然而在小屏幕上查看，会感觉内容过于拥挤，升高了用户体验。此时，为了解决这个问题而衍生进去的概念就是响应式布局。它能够自动识别屏幕宽度、并做出相应调整。网页的排版布局和展现的内容会有所变动
最初
感觉文章不错的，给我点个赞哇，关注一下呗！
技术交换可关注微信公众号【GitWeb】，加我好友一起探讨
微信交换群：加好友（备注思否）邀你入群，抱团学习共提高