背景
跟着挪动装备和前端手艺的生长，交互页面也在挪动端运用愈来愈频仍。然则挪动装备屏幕的大小和分辨率并不一致，这致使了并不能依据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或许百分比规划，就基础可以处理大部分题目。
祝人人端午节快活。
