使用Flexible进行移动Web开发

移动端适配方案

引入flexible.js

在 *.html的 标签中引入

flexible.js会做以下几件事：

1. 给*.html添加内联样式表

   • 只是reset一些样式

2. 给设置[data-dpr=""]属性、font-size 样式

   • [data-dpr=""]属性的作用：通过属性选择器，设置不同分辨率下的样式
   • font-size: 的作用：rem单位的基准尺寸
3. 监听resize、pageshow事件来重新设置html.style.fontSize
4. 设置body.style.fontSize

5. 定义window.lib.flexible

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

Note：HTML中无需设置，否则，不管设备是多少的dpr，都会强制认为其dpr是你设置的值。

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

通过scss定义px2rem的转换

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

文本字号不建议使用rem

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

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

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

解决方案

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

// dpr === 1， 设计图尺寸375 * 667为例
@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;
    }
}
// dpr === 2， 设计图尺寸750 * 1135为例
@mixin font-dpr($font-size){
    font-size: $font-size / 2;

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

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

@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
  }
});

参考文档

• Flexible官方文档
• viewport的介绍1
• viewport的介绍2
• iphone12适配