背景
随着移动设备和前端技术的发展，交互页面也在移动端使用越来越频繁。但是移动设备屏幕的大小和分辨率并不一致，这导致了并不能按照pc端编写页面的方式去编写移动端页面。
随着实践地不断进行和技术的发展，逐渐形成了下面几个概念：
- 自适应（Adaptive）
程序代码主动地去根据不同的屏幕大小，去实现不同的样式代码，需要实现不同的样式代码。 - 响应式（Responsive）
程序代码被动地去适应屏幕的宽度变化，经常使用百分比或者media查询。
网上流传最多的图就是下面的图，个人认为还是可以能够解释两者之间的区别
但其实这两者之间的区别很难区分，有的程序界面更是把两者结合起来，实现更好的用户体验，毕竟用户至上。下面就从实际应用方面来讲一下，具体的实际应用。
响应式
无论响应式还是自适应，都是针对每一个html元素进行宽度的变化和布局的变化。
在我看来，响应式就是让html元素宽度能够根据不同的屏幕宽度，进行对应的宽度变化。
实现方式——百分比宽度
常用的百分比宽度，比如antd的栅格布局，就是将屏幕划分为24格，每一个格子占据4.1%的宽度。
实现方式——flex布局
flex是弹性盒，将某一个元素设置为弹性盒，就创建了一个BFC，可以设置内部元素的相关属性。可以设置内部元素的shrink/grow/order。这样就能够让内部元素随着屏幕的变化进行不同的宽度变化。
这里就不讲flex的具体知识点了，详情查看参考资料。
缺点
针对元素进行宽度变化，布局仍然遵循流式布局。所有的布局都是统一的。
具体内容的元素并没有变化，比如字体的大小。
自适应
自适应是，程序代码已经为不同的宽度配备了不同的样式代码（大小和布局）。当用户界面切换到不同的大小的时候，就展示不同的样式或者布局。
具体可以分为两类：
- 阶梯式
- 平滑式
1、阶梯式自适应
如图所示:
阶梯式自适应，就是对不同的大小设置不同的样式，通常使用media查询。设置不同的断点，在不同的断点处设置不同的样式。当然也可以设置一个范围内的样式。
@media screen and (device-width: 640px) {
html {
font-size: 100px;
color: blue
}
}
@media all and (min-width:500px) and (max-width:1000px){
body{
color:#f00;
}
}
可以根据不同的屏幕宽度设置不同的布局
与rem（em）结合
rem是根据文档元素跟节点的字体大小设置不同的大小
em是根据当前对象的字体大小
@media screen and (device-width: 640px) {
html {
font-size: 100px;
color: blue
}
}
div {
// 这里的1rem就是100px
width: 1rem;
}
与rem结合，可以解决不同屏幕尺寸下，字体大小的变化，对于font-size大小的设置，可以参考天猫、京东的rem设置。
缺点
这样做可以在不同的宽度显示不同的样式，但是没法实现持续性的变化，可能会看到不同页面大小请看下屏幕中的字体或者其他会突然变化。
2、平滑式自适应
如图所示：
平滑自适应可以看作曲度特别小的阶梯式自适应。
方法
主要通过设置监听函数，动态改变font-size的大小。
window.addEventListener('resize', adjustWidth);
const adjustWidth = () => {
var deviceWidth =
document.documentElement.clientWidth > 1300
? 1300
: document.documentElement.clientWidth;
document.documentElement.style.fontSize = (deviceWidth / 6.4) + 'px';
}
结合rem就可以动态设置html元素的大小。
技术方案选择
整体来说，没有哪一种方案是最合适的。经常需要几种不同的技术手段互相结合。 经常用的方式就是：
- 通过media查询，设置font-size的大小，具体的元素可以通过flex或者百分比布局，就基本可以解决大部分问题。
祝大家端午节快乐。
