自适应和响应式

背景

    随着移动设备和前端技术的发展，交互页面也在移动端使用愈来愈频繁。可是移动设备屏幕的大小和分辨率并不一致，这致使了并不能按照pc端编写页面的方式去编写移动端页面。
    随着实践地不断进行和技术的发展，逐渐造成了下面几个概念：

• 自适应（Adaptive）
       程序代码主动地去根据不一样的屏幕大小，去实现不一样的样式代码，须要实现不一样的样式代码。
• 响应式（Responsive）
       程序代码被动地去适应屏幕的宽度变化，常用百分比或者media查询。
  网上流传最多的图就是下面的图，我的认为仍是能够可以解释二者之间的区别

但其实这二者之间的区别很难区分，有的程序界面更是把二者结合起来，实现更好的用户体验，毕竟用户至上。下面就从实际应用方面来说一下，具体的实际应用。

响应式

不管响应式仍是自适应，都是针对每个html元素进行宽度的变化和布局的变化。

在我看来，响应式就是让html元素宽度可以根据不一样的屏幕宽度，进行对应的宽度变化。

实现方式——百分比宽度

经常使用的百分比宽度，好比antd的栅格布局，就是将屏幕划分为24格，每个格子占据4.1%的宽度。

实现方式——flex布局

    flex是弹性盒，将某一个元素设置为弹性盒，就建立了一个BFC，能够设置内部元素的相关属性。能够设置内部元素的shrink/grow/order。这样就可以让内部元素随着屏幕的变化进行不一样的宽度变化。
    这里就不讲flex的具体知识点了，详情查看参考资料。

缺点

针对元素进行宽度变化，布局仍然遵循流式布局。全部的布局都是统一的。
具体内容的元素并无变化，好比字体的大小。

自适应

自适应是，程序代码已经为不一样的宽度配备了不一样的样式代码（大小和布局）。当用户界面切换到不一样的大小的时候，就展现不一样的样式或者布局。

具体能够分为两类：

• 阶梯式
• 平滑式

一、阶梯式自适应

如图所示:

阶梯式自适应，就是对不一样的大小设置不一样的样式，一般使用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设置。

缺点

这样作能够在不一样的宽度显示不一样的样式，可是无法实现持续性的变化，可能会看到不一样页面大小请看下屏幕中的字体或者其余会忽然变化。

二、平滑式自适应

如图所示：

平滑自适应能够看做曲度特别小的阶梯式自适应。

方法

主要经过设置监听函数，动态改变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或者百分比布局，就基本能够解决大部分问题。

祝你们端午节快乐。

参考资料

一、Flex布局
二、web自适应
三、自适应和响应式区别
四、技术方案选择