[toc]

移动端适配方案`flexible.js`

出发点

事故的开始总是有原因的，那思考一下，为什么使用Flexible?

为了rem布局？ >> 为什么要rem布局 ——> 高度还原
移动端适配? >> 为什么移动端适配要用Flexible ——> 同等占比
什么是移动端适配？

最初点是设计图的高度还原！！！

以750*1334设计稿(iPhone6)为准，期望每一个设计元件在iPhone6实机上占比、宽高比都与设计稿显示一致。

一套代码又想扩展到其它设备，于是出现了rem布局

Flexible做了什么
rem是什么
如何做到高度还原设计图的

引入flexible.js

在*.html的标签中引入

flexible.js会做以下几件事：

给*.html添加内联样式表
- 只是reset一些样式
给设置[data-dpr=""]属性、font-size样式
- [data-dpr=""]属性
  - 通过属性选择器，设置不同分辨率下的样式
  - 主要是针对字号
- font-size
  - rem单位的基准尺寸
监听resize、pageshow事件来重新设置html.style.fontSize
设置body.style.fontSize
定义全局变量window.lib.flexible

window.lib.flexible = {
  dpr: number,
  refreshRem: function,
  rem2px: function,
  px2rem: function
}

Note：HTML中无需设置meta#viewport，flexible.js会根据window.devicePixelRatio的值自动添加meta#viewport。

假设设置如下，不管设备是多少的dpr，flexible.js不再修改该元数据配置，都会强制认为其dpr是你设置的值。

Note：在Flexible中，只对iOS设备进行dpr的判断，对于Android系列，始终认为其dpr为1

对于`Android`系列，始终认为其`dpr`为1？

深入flexible.js的实现，是body#width依据devicePixelRatio进行缩放的。

而针对iOS设备，缩放后正好为其visual viewport的尺寸。

而针对Android系列手头上的机器测试，不用缩放，body#width正好为其visual viewport的尺寸。

`body#width / dpr > 540`？

若body#width / dpr > 540，如PC端body#width > 1080，Flexible当1080处理。

通过`scss`定义px2rem的转换

_{在不使用自动化工具的基础上，无法使用以下处理方式，只能自己计算后再赋值}

@function px2rem($px, $base-font-size: 16px) {
    @if (unitless($px)) {
        @warn "Assuming #{$px} to be in pixels, attempting to convert it into pixels for you";
        @return px2rem($px + 0px); // That may fail.
    } @else if (unit($px) == rem) {
        @return $px;
    }
    @return ($px / $base-font-size) * 1rem;
}

原理：通过以上步骤，就能实现设计图的高度还原？

本质上是设计元件的同比转换。

flexible.js将body#width分成100份，一份为基准，设置为html#fontStyle，而px2rem将设计元件转换为设计图的占比*%，以rem为中介，在设备上的展示具有同等占比。

以此来实现设计图的高度还原。

然而，计算出来的结果可能非有效值，所以，浏览器的显示优化……

如：小于12px的字体、浮点数的精度……

文本字号不建议使用`rem`

我们希望文本在相同dpr屏幕下文本字号相同

我们希望在大屏手机上看到更多文本

不希望出现13px和15px这样的奇葩尺寸

解决方案

文本还是使用px作为单位，只不过使用[data-dpr]属性来区分不同dpr下的文本字号大小

_{在不使用自动化工具的基础上，无法使用以下处理方式，只能自己计算后再赋值}

@mixin font-dpr($font-size){
    font-size: $font-size;

    [data-dpr="2"] & {
        font-size: $font-size * 2;
    }

    [data-dpr="3"] & {
        font-size: $font-size * 3;
    }
}

@include font-dpr(16px);

补充知识点

flexible.js使用document.readyState API获取document的加载状态

document.addEventListener('readystatechange', event => {
  if (event.target.readyState === 'interactive') {
    // 等同于DOMContentLoaded 事件
  }
  else if (event.target.readyState === 'complete') {
    // 表示 load 状态的事件即将被触发。
    // 等同于loaded
  }
});

在`Vue`项目中的实战

_{项目由@vue/[email protected]创建的}