背景随着移动设备和前端技术的发展，交互页面在移动端的使用也越来越频繁。但是，移动设备屏幕的尺寸和分辨率并不一致，导致无法像PC端页面一样编写移动端页面。随着实践的不断进步和技术的发展，逐渐形成了以下概念：自适应（Adaptive）程序代码根据不同的屏幕尺寸主动实现不同的样式代码，需要实现不同的样式代码。响应式程序代码被动地适应屏幕宽度的变化，通常使用百分比或媒体查询。网上流传最广的图片就是下图。个人认为还是可以说明两者的区别，但实际上两者的区别是很难区分的。一些程序界面将两者结合起来以达到更好的效果。出色的用户体验，毕竟用户至上。下面从实际应用的角度说一下具体的实际应用。响应式，不管是responsive还是adaptive，都会改变每个html元素的宽度和布局。在我看来，响应式就是让html元素的宽度可以根据不同的屏幕宽度而变化。实现方式——百分比宽度常用的百分比宽度，比如antd的网格布局，就是把屏幕分成24个网格，每个网格占宽度的4.1%。实现方法——flex布局Flex是一个灵活的盒子。将元素设置为灵活框创建一个BFC，可以设置内部元素的相关属性。可以设置内部元素的收缩/增长/顺序。这允许内部元素随着屏幕的变化而改变宽度。flex的具体知识点这里就不说了，具体可以参考参考资料。缺点是改变了元素的宽度，布局仍然遵循流式布局。所有的布局都是统一的。具体内容的元素没有改变，比如字体大小。响应式是程序代码已经为不同的宽度配备了不同的样式代码（大小和布局）。当用户界面切换到不同尺寸时，会显示不同的样式或布局。具体可以分为两类：stepedsmoothtype1,stepedadaptive如图：stepedadaptive，就是给不同的size设置不同的样式，通常使用mediaquery。设置不同的断点，不同的断点设置不同的样式。当然，您还可以设置一系列样式。@mediascreenand(device-width:640px){html{font-size:100px;颜色：蓝色}}@mediaalland(min-width:500px)and(max-width:1000px){body{color:#f00;}}可以根据不同的屏幕宽度设置不同的布局。结合rem(em)rem基于文档元素和节点的字体大小。em是根据当前对象的字体大小@mediascreenand(device-width:640px){html{font-size:100px;color:blue}}div{//这里1rem就是100pxwidth:1rem;}结合rem可以解决不同屏幕尺寸下字体大小的变化。font-size的设置可以参考天猫和京东的rem设置。缺点是可以在不同的宽度显示不同的样式，但是不能实现连续变化。您可能会看到不同的页面大小，请查看屏幕上的字体或其他突然的变化。2、如图所示的平滑自适应：平滑自适应可以看成是一种阶梯式自适应，变化程度特别小。该方法主要是通过设置监听函数来动态改变font-size的大小。window.addEventListener('resize',adjustWidth);constadjustWidth=()=>{vardeviceWidth=document.documentElement.clientWidth>1300?1300:文档.documentElement.clientWidth;document.documentElement.style.fontSize=(device)+'px';}结合rem可以动态设置html元素的大小。技术方案选择总的来说，没有一种方案是最合适的。往往需要几种不同的技术手段相互结合。常用的方法是：通过mediaquery设置font-size的大小，具体元素可以通过flex或者percentage来布局，基本可以解决大部分问题。祝大家端午节快乐。参考资料1.Flex布局2.Web自适应3.自适应和响应式的区别4.技术方案选择
