首先两种的方式的解决问题是不一样的。
宽度自适应
是为了解决如何才能在不同大小的设备上呈现相同的网页。手机的屏幕比较小，宽度通常在500像素以下，pc的像素一般在1000像素以上。因此就有人想出了一个办法，能不能"一次设计，普遍适用"，让同一张网页自动适应不同大小的屏幕，根据屏幕的宽度，自动调节网页的内容大小，但是无论怎么样子，他们的主体的内容和布局没有变化。核心是使用rem代替绝对单位px。
自适应还是暴露出一个问题，如果屏幕太小，即使网页能够根据屏幕大小进行适配，但是会感觉在小屏幕上查看，内容过于拥挤，响应式正是为了解决这个问题而衍生出来的概念。它可以自动识别屏幕宽度、并做出相应调整的网页设计，布局和展示的内容可能会有所变动。
响应式Web设计
让一个网站同时适配多种设备和多个屏幕，可以让网站的布局和功能随用户的使用环境(屏幕大小、输入方式、设备/浏览器能力)而变化。核心是使用媒体查询相对于视口大小应用CSS规则。
响应式的概念应该覆盖了自适应（因为可以使用rem代替绝对单位px+媒体查询），而且涵盖的内容更多。
自适应实现方式
1. 首先在网页代码的头部，加入一行viewport元标签。
<meta name="viewport" content="width=device-width, initial-scale=1" />
viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。
2. 使用rem代替绝对单位px
动态 rem是针对移动端页面的适配方法。例如手机淘宝 在移动端宽度不适合再用固定宽度px，我们希望整体等比缩放。
rem是CSS3新增的一个相对单位（root em，根em），相对的只是HTML根元素（1rem=html font size）。通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应（em也是相对长度单位，但会继承父级元素的字体大小）。
注意：rem是相对于根节点html的font-size的倍数，浏览器对font-size值有限制，一般font-size最小值默认为12。
动态rem方案
- meta:vp禁止缩放
<meta name="viewport" content="width=device-width, height=device-height, inital-scale=1.0, maximum-scale=1.0, user-scalable=no;" /> - document.documentElement.clientWidth动态获取页面宽度width
- 赋给html的font-size，即拼接成
html{font-size:'+ width/10 +'px;} - 10rem==页面宽度width
- 所有单位都用rem == 所有长度都以页面的宽度为基准
示例
3. 使用视口单位(Viewport units) vw／vh
rem单位来实现适配，但是它还需要内嵌一段脚本去动态计算跟元素大小。
那有没有一个单位不需要JS和CSS耦合在一起的单位？答案是有的，就是vw／vh。
视口单位(Viewport units)
视口单位中的“视口”，桌面端指的是浏览器的可视区域；移动端指的就是Viewport中的Layout Viewport。
| 单位 | 解释 |
|---|---|
| vw | 1vw = 视口宽度的1% |
| vh | 1vh = 视口高度的1% |
| vmin | 选取vw和vh中最小的那个 |
| vmax | 选取vw和vh中最大的那个 |
vh/vw与%区别
vh/vw与%区别在于:
| 单位 | 依赖于 |
|---|---|
| % | 元素的祖先元素 |
| vh/vw | 视口的尺寸 |
自适应基础上的响应式页面
3. 媒体查询
目前一般常见的实现响应式有两种方法，一种是利用媒体查询，另外一种是bootstrap下的栅格布局。
媒体查询，即 @media 查询，可以针对不同的屏幕尺寸设置不同的样式，当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。
媒体查询示例
如果页面宽度小于 300 像素,则修改body的背景颜色为红色:
@media screen and (max-width: 300px) {
body {
background-color:red;
}
}
如果页面宽度大于 300 像素并且小于600像素，则修改body的背景颜色为绿色:
@media screen and (min-width: 300px) and (max-width:600px) {
body {
background-color:green;
}
}
如果页面宽度大于 600 像素，则修改body的背景颜色为蓝色:
@media screen and (min-width: 600px) {
body {
background-color:blue;
}
}
还有一种响应式是使用绝对宽度px + 媒体查询，那么对于宽度不同的手机，显示页面内容的宽度仍然一样，内容居中，只是两边留白宽度不同。
4. 使用Flex弹性布局
布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。
Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。可以简便、完整、响应式地实现各种页面布局。
具体用法
网友评论