Flexible.js可伸缩布局实现方法详解


Posted in Javascript onNovember 13, 2020

阿里团队开源的一个库。flexible.js,主要是实现在各种不同的移动端界面实现一稿搞定所有的设备兼容自适应问题。

实现方法:

通过JS来调整html的字体大小,而在页面中的制作稿则统一使用rem这个单位来制作。关键代码如下:

;(function(win, lib) {
  var doc = win.document;
  var docEl = doc.documentElement;
  var metaEl = doc.querySelector('meta[name="viewport"]');
  var flexibleEl = doc.querySelector('meta[name="flexible"]');
  var dpr = 0;
  var scale = 0;
  var tid;
  var flexible = lib.flexible || (lib.flexible = {});
   
  if (metaEl) {
    console.warn('将根据已有的meta标签来设置缩放比例');
    var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/);
    if (match) {
      scale = parseFloat(match[1]);
      dpr = parseInt(1 / scale);
    }
  } else if (flexibleEl) {
    var content = flexibleEl.getAttribute('content');
    if (content) {
      var initialDpr = content.match(/initial\-dpr=([\d\.]+)/);
      var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/);
      if (initialDpr) {
        dpr = parseFloat(initialDpr[1]);
        scale = parseFloat((1 / dpr).toFixed(2));  
      }
      if (maximumDpr) {
        dpr = parseFloat(maximumDpr[1]);
        scale = parseFloat((1 / dpr).toFixed(2));  
      }
    }
  }
 
  if (!dpr && !scale) {
    var isAndroid = win.navigator.appVersion.match(/android/gi);
    var isIPhone = win.navigator.appVersion.match(/iphone/gi);
    var devicePixelRatio = win.devicePixelRatio;
    if (isIPhone) {
      // iOS下,对于2和3的屏,用2倍的方案,其余的用1倍方案
      if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {        
        dpr = 3;
      } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
        dpr = 2;
      } else {
        dpr = 1;
      }
    } else {
      // 其他设备下,仍旧使用1倍的方案
      dpr = 1;
    }
    scale = 1 / dpr;
  }
 
  docEl.setAttribute('data-dpr', dpr);
  if (!metaEl) {
    metaEl = doc.createElement('meta');
    metaEl.setAttribute('name', 'viewport');
    metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
    if (docEl.firstElementChild) {
      docEl.firstElementChild.appendChild(metaEl);
    } else {
      var wrap = doc.createElement('div');
      wrap.appendChild(metaEl);
      doc.write(wrap.innerHTML);
    }
  }
 
  function refreshRem(){
    var width = docEl.getBoundingClientRect().width;
    if (width / dpr > 540) {
      width = 540 * dpr;
    }
    var rem = width / 10;
    docEl.style.fontSize = rem + 'px';
    flexible.rem = win.rem = rem;
  }
 
  win.addEventListener('resize', function() {
    clearTimeout(tid);
    tid = setTimeout(refreshRem, 300);
  }, false);
  win.addEventListener('pageshow', function(e) {
    if (e.persisted) {
      clearTimeout(tid);
      tid = setTimeout(refreshRem, 300);
    }
  }, false);
 
  if (doc.readyState === 'complete') {
    doc.body.style.fontSize = 12 * dpr + 'px';
  } else {
    doc.addEventListener('DOMContentLoaded', function(e) {
      doc.body.style.fontSize = 12 * dpr + 'px';
    }, false);
  }
   
 
  refreshRem();
 
  flexible.dpr = win.dpr = dpr;
  flexible.refreshRem = refreshRem;
  flexible.rem2px = function(d) {
    var val = parseFloat(d) * this.rem;
    if (typeof d === 'string' && d.match(/rem$/)) {
      val += 'px';
    }
    return val;
  }
  flexible.px2rem = function(d) {
    var val = parseFloat(d) / this.rem;
    if (typeof d === 'string' && d.match(/px$/)) {
      val += 'rem';
    }
    return val;
  }
 
})(window, window['lib'] || (window['lib'] = {}));

从上面的代码,主要是改变了dpx和document的font-size大小。大小为docEl.getBoundingClientRect().width / 10 + 'px';

假设我们的设计稿宽是640的,则html的字体大小则被设为64px.则相当于1rem=64px.(1rem相对于根节点的字体大小)。

假如一个元素的宽是160px,在平时,我们可以采用百分比可以做到自适应,假如使用响应式的话,可能需要设置多个,比如在320px,输出80px,而在640px输出160px等。而采用以上的方法,则只需要输出2.5rem就能实现统一,如下表格:

设备宽度 320px 360px 414px 640px
Html字体大小 32px 36px 41.4px 64px
实际输出 1rem 1rem 1rem 1rem
设计稿缩放大小 80px 90px 103.5px 160px
实际输出 2.5rem 2.5rem 2.5rem 2.5rem

以上的2.5rem是怎么得出的呢?

160/64(1rem的基数为64px)=2.5rem;按照官方的说法(750px举例)

Flexible会将视觉稿分成100份(主要为了以后能更好的兼容vh和vw),而每一份被称为一个单位a。同时1rem单位被认定为10a。针对我们这份视觉稿可以计算出:

1a = 7.5px
1rem = 75px

那么我们这个示例的稿子就分成了10a,也就是整个宽度为10rem,<html>对应的font-size为75px:

这样一来,对于视觉稿上的元素尺寸换算,只需要原始的px值除以rem基准值即可。例如此例视觉稿中的图片,其尺寸是176px * 176px,转换成为2.346667rem * 2.346667rem。

另外在使用这个来处理自适应的另一个坑就是css sprite,作者的建议是使用svg,或者icon font.或者base64等其他方案。

另外就是在dpr=2时,小图片可能会出现模糊,建议以最大的图片来切图。

字体建议使用px

在作者的观点中,是建议描述性的字体使用px,如果有slogan之类大于48px的,可以使用rem,由于使用rem在iPhone5和iPhone6中字体不同,可能出现13px和15px,点阵字体。

显然,我们在iPhone3G和iPhone4的Retina屏下面,希望看到的文本字号是相同的。也就是说,我们不希望文本在Retina屏幕下变小,另外,我们希望在大屏手机上看到更多文本,以及,现在绝大多数的字体文件都自带一些点阵尺寸,通常是16px和24px,所以我们不希望出现13px和15px这样的奇葩尺寸。

如此一来,就决定了在制作H5的页面中,rem并不适合用到段落文本上。所以在Flexible整个适配方案中,考虑文本还是使用px作为单位。只不过使用[data-dpr]属性来区分不同dpr下的文本字号大小。

div {
  width: 1rem; 
  height: 0.4rem;
  font-size: 12px; // 默认写上dpr为1的fontSize
}
[data-dpr="2"] div {
  font-size: 24px;
}
[data-dpr="3"] div {
  font-size: 36px;
}

为了能更好的利于开发,在实际开发中,我们可以定制一个font-dpr()这样的Sass混合宏:

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

当然这只是针对于描述性的文本,比如说段落文本。但有的时候文本的字号也需要分场景的,比如在项目中有一个slogan,业务方希望这个slogan能根据不同的终端适配。针对这样的场景,完全可以使用rem给slogan做计量单位。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS类定义原型方法的两种实现的区别评论很多
Sep 12 Javascript
基于jQuery实现的扇形定时器附源码下载
Oct 20 Javascript
jQuery实时显示鼠标指针位置和键盘ASCII码
Mar 28 Javascript
jQuery简单实现tab选项卡切换效果
Jun 20 Javascript
AngularJS入门教程之路由与多视图详解
Aug 19 Javascript
Javascript 6里的4个新语法
Aug 25 Javascript
jQuery学习笔记之入门
Dec 14 Javascript
vue-ajax小封装实例
Sep 18 Javascript
Vue实战之vue登录验证的实现代码
Oct 31 Javascript
vue-自定义组件传值的实例讲解
Sep 18 Javascript
微信小程序实现的日期午别医生排班表功能示例
Jan 09 Javascript
vue实现匀速轮播效果
Jun 29 Javascript
vue切换菜单取消未完成接口请求的案例
Nov 13 #Javascript
在vue中嵌入外部网站的实现
Nov 13 #Javascript
如何基于viewport vm适配移动端页面
Nov 13 #Javascript
VueCli生产环境打包部署跨域失败的解决
Nov 13 #Javascript
Vue使用Proxy代理后仍无法生效的解决
Nov 13 #Javascript
vue iview 隐藏Table组件里的某一列操作
Nov 13 #Javascript
详解Java中String JSONObject JSONArray List转换
Nov 13 #Javascript
You might like
php 解析xml 的四种方法详细介绍
2016/10/26 PHP
php curl简单采集图片生成base64编码(并附curl函数参数说明)
2019/02/15 PHP
基于PHP实现微信小程序客服消息功能
2019/08/12 PHP
Laravel5.1 框架路由基础详解
2020/01/04 PHP
Array.prototype.slice.apply的使用方法
2010/03/17 Javascript
jquery 关键字“拖曳搜索”之“拖曳”以及 图片“提示自适应放大”效果 的实现
2010/04/18 Javascript
Javascript 中的 &amp;&amp; 和 || 使用小结
2010/04/25 Javascript
jQuery-serialize()输出序列化form表单值的方法
2012/12/26 Javascript
浅析BootStrap栅格系统
2016/06/07 Javascript
基于bootstrap风格的弹框插件
2016/12/28 Javascript
jQuery Mobile漏洞会有跨站脚本攻击风险
2017/02/12 Javascript
ionic2中使用自动生成器的方法
2018/03/04 Javascript
JS实现字符串中去除指定子字符串方法分析
2018/05/17 Javascript
JS中的算法与数据结构之栈(Stack)实例详解
2019/08/20 Javascript
简单使用webpack打包文件的实现
2019/10/29 Javascript
react结合bootstrap实现评论功能
2020/05/30 Javascript
javascript使用正则表达式实现注册登入校验
2020/09/23 Javascript
python根据出生年份简单计算生肖的方法
2015/03/27 Python
Python 实现数据库(SQL)更新脚本的生成方法
2017/07/09 Python
python学习笔记之列表(list)与元组(tuple)详解
2017/11/23 Python
对pandas中iloc,loc取数据差别及按条件取值的方法详解
2018/11/06 Python
python 输出所有大小写字母的方法
2019/01/02 Python
pytorch实现onehot编码转为普通label标签
2020/01/02 Python
在pytorch中对非叶节点的变量计算梯度实例
2020/01/10 Python
python多线程实现代码(模拟银行服务操作流程)
2020/01/13 Python
用Python生成HTML表格的方法示例
2020/03/06 Python
python 的topk算法实例
2020/04/02 Python
Python 实现敏感目录扫描的示例代码
2020/05/21 Python
30行Python代码实现高分辨率图像导航的方法
2020/05/22 Python
Python RabbitMQ实现简单的进程间通信示例
2020/07/02 Python
澳大利亚女士时装在线:Rockmans
2018/09/26 全球购物
北美Newegg打造的全球尖货海购平台:tt海购
2018/09/28 全球购物
英国时尚和家居用品零售商:Matalan
2021/02/28 全球购物
自我鉴定思想方面
2013/10/07 职场文书
工商治理实习生的自我评价
2014/01/15 职场文书
领导班子三严三实对照检查材料
2014/09/25 职场文书