响应式与自适应布局的关键区别与实现方案解析

响应式页面

响应式布局是网页的布局针对屏幕大小的尺寸而进行响应；通过检测视口分辨率，针对不同客户端在客户端做代码处理，来展现不同的布局和内容；只需要开发一套界面即可适用于所有尺寸及终端。

布局特点：每个屏幕分辨率下面会有一个布局样式，即元素位置和大小都会变。

设计方法：媒体查询+流式布局。

自适应布局页面

通过检测视口分辨率，来判断当前访问的设备是pc端、平板还是手机，从而请求服务层，返回不同的页面；

需要根据不同使用场景开发多套界面。

布局特点：屏幕分辨率变化时，页面里面元素的位置会变化，而大小不会变化。

设计方法：使用媒体查询给不同尺寸和介质的设备切换不同的样式，在同一个设备下实际还是固定的布局。

响应式布局的 5 种实现方案

• 百分比布局：当浏览器的宽度或者高度发生变化时，通过百分比单位可以使得浏览器中的组件的宽和高随着浏览器的变化而变化，从而实现响应式的效果。

缺点：计算困难，如果我们要定义一个元素的宽度和高度，按照设计稿，必须换算成百分比单位。

• 媒体查询布局：通过媒体查询，可以通过给不同屏幕的大小编写不同的样式来实现响应式的布局。

缺点：如果浏览器大小改变时，需要改变的样式太多，那么多套样式代码会很繁琐。

• rem响应式布局：rem 是相对于 html 根元素的字体大小的单位。我们通过修改 html 中 font-size 的字体大小来控制 rem 的大小。

在实际的开发中，我们通常会以 750px 的移动端设计稿来开发。我们在代码写完后，统一会把所有 px 单位全部转成 rem 来实现。

• vw响应式布局：vw 和 vh 分别相对的是视图窗口的宽度和视口窗的高度。

100vw = 视图窗宽度 ，100vh = 100 视图窗高度

如果移动端有 5 个不同的视口宽尺寸 750 ，640，480，375，320，则在不同尺寸下，对应的 1vw 的 px 值如下表

移动端尺寸1vw750px7.5px640px6.4px480px4.8px375px3.75px320px320px

我们在实际开发时，只需要按其中的某一个尺寸来的 px 单位的设计稿来开发就好（一般是以 750px 的大小为主）

代码全部开发好后，我们再利用 vscode 的插件 px to vw 来实现单位的自动转换。

flex 弹性布局：弹性布局是一种十分方便的，只需要依赖于 CSS 样式的实现响应式布局的方式，也是最多用到的一种实现响应式的方法。

弹性布局在父、子元素上都有相对应的属性来规范子元素在父元素中的 “ 弹力 ”。

在父元素上，我们经常会用到的有关弹性布局的属性主要有 flex-direction , flex-wrap , justify-content , align-items , align-content

在子元素上，我们经常会用到的有关弹性布局的属性主要有 order , flex-grow , flex-shrink ,flex-basis , align-self

响应式布局的规则

1、分段响应规则

浏览器宽度每达到一个数值（Breakpoint）的时候，页面的排版和样式就会发生明显的变化，而这就是响应式设计最重要的功能 ——分段展示

可以简单的归纳成三种组件的调整：内容增减、布局调整、样式调整。

2、组件宽度适应

组件宽度适应在手机UI的适配中非常重要，即完成不同屏幕宽的手机适配所应用的逻辑。

组件的宽度适应模式主要有两种类型，一种是容器宽度适应，一种是容器比例缩放。