乐趣区

自适应和响应式

jiezi

背景

    随着移动设备和前端技术的发展，交互页面也在移动端使用越来越频繁。但是移动设备屏幕的大小和分辨率并不一致，这导致了并不能按照 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、技术方案选择

退出移动版