乐趣区

关于html5:使用Flexible进行移动Web开发

jiezi

挪动端适配计划

引入 flexible.js

在 *.html 的<head>标签中引入<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>

flexible.js会做以下几件事：

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

    • 只是 reset 一些款式

  2. 给 <html> 设置 [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中无需设置<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,minimum-scale=1.0,maximum-scale=1.0">，否则，不论设施是多少的 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 适配
退出移动版