摘要：响应式无论响应式还是自适应，都是针对每一个元素进行宽度的变化和布局的变化。自适应自适应是，程序代码已经为不同的宽度配备了不同的样式代码大小和布局。参考资料布局自适应自适应和响应式区别技术方案选择
背景
随着移动设备和前端技术的发展，交互页面也在移动端使用越来越频繁。但是移动设备屏幕的大小和分辨率并不一致，这导致了并不能按照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或者百分比布局，就基本可以解决大部分问题。
祝大家端午节快乐。
参考资料1、Flex布局
2、web自适应
3、自适应和响应式区别
4、技术方案选择
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/104521.html
摘要：做移动端自适应时可能很多人都对自适应和之间的关系产生疑问也有一些人会疑虑比如我的自适应方案没有加会不会出问题针对这些疑问我说一下我的见解。 做移动端自适应时可能很多人都对自适应和dpr之间的关系产生疑问,也有一些人会疑虑比如我的自适应方案没有加dpr会不会出问题,针对这些疑问我说一下我的见解。 1. 什么是尺寸自适应 首先标题说的自适应,可能自适应在不同人眼里理解不同，特别与响应式的关...
摘要：做移动端自适应时可能很多人都对自适应和之间的关系产生疑问也有一些人会疑虑比如我的自适应方案没有加会不会出问题针对这些疑问我说一下我的见解。 做移动端自适应时可能很多人都对自适应和dpr之间的关系产生疑问,也有一些人会疑虑比如我的自适应方案没有加dpr会不会出问题,针对这些疑问我说一下我的见解。 1. 什么是尺寸自适应 首先标题说的自适应,可能自适应在不同人眼里理解不同，特别与响应式的关...
阅读 705·2021-11-18 10:02
阅读 3581·2021-09-02 10:21
阅读 1730·2021-08-27 16:16
阅读 2060·2019-08-30 15:56
阅读 2388·2019-08-29 16:53
阅读 1376·2019-08-29 11:18
阅读 2956·2019-08-26 10:33
阅读 2643·2019-08-23 18:34
