• 阿里团队开源的一个库。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份(主要为了以后能更好的兼容vhvw),而每一份被称为一个单位a。同时1rem单位被认定为10a。针对我们这份视觉稿可以计算出:

1a   = 7.5px
1rem = 75px

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

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

另外大漠还写了一篇详细的文章:使用Flexible实现手淘H5页面的终端适配 里面介绍了一个如何快速转换rem为px的几种方法,感兴趣的童鞋可以去看看。

也可以看这篇文章:Sass函数功能——rem转px

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

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

字体建议使用px

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

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

如此一来,就决定了在制作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做计量单位。

DEMO

转载:移动端自适应:flexible.js可伸缩布局使用的更多相关文章

  1. 移动端自适应:flexible.js可伸缩布局使用

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

  2. vue-cli配置移动端自适应flexible.js

    第一部分:项目中引入lib-flexible 一.项目中安装lib-flexible npm install lib-flexible --save-dev 二.在项目入口文件main.js中引入li ...

  3. vue.js移动端配置flexible.js

    前言 最近在用vue做移动端项目,网上找了一些移动端适配的方案,个人觉得手淘团队flexible.js还是比较容易上手,在这里做下总结. 主体 flexible.js适配方案采用rem布局,根据屏幕分 ...

  4. vue脚手架搭建移动端项目--flexible.js

    通过命令行 node -v 查看是否安装node环境 在 nodejs 和 webpack已安装的前提下,随便一个文件夹下,输入命令行 npm install vue-cli -g 安装完成后,通过 ...

  5. 移动端适配--flexible.js

    引言: H5适配一直是一个比较普遍的问题,很多文章都会讲,最近开发了一个H5的项目使用了一下淘宝的 flexible.js,写一篇文章自己总结一下. 一.背景介绍: Flexible.js是淘宝公开的 ...

  6. 移动端适配flexible.js

    npm install lib-flexible --save npm install px2rem-loader --save-dev

  7. 移动端 css/html (box-flex)自适应、等比布局

    移动端 css/html (box-flex)自适应.等比布局 对于移动端自适应的一种布局方式. <!DOCTYPE html> <html> <head> < ...

  8. flexible.js结合rem实现移动端自适应布局

    1. 配置开发工具(sublime)插件      https://github.com/flashlizi/cssrem     注意: 只有在‘.css’后缀文件才能使用此插件功能   2. 在h ...

  9. 【转载】rem自适应布局-移动端自适应必备

    原文链接:rem自适应布局-移动端自适应必备 版权所有,转载时请注明出处,违者必究. 由于移动端特殊性,本文讲的是如何使用rem实现自适应,或叫rem响应式布局,通过使用一个脚本就可以rem自适应,不 ...

随机推荐

  1. Django-Python3-Celery 异步任务/定时任务

    1. 目录结构 2. setting设置: 3. project/project/celery.py 4. project/project/__init.py 5.任务分配 6. 代码实现 View ...

  2. 淘宝的开源分布式文件系统TFS

    TFS(Taobao FileSystem)是淘宝团队开源的海量非结构化数据存储设计的分布式系统.构筑在普通的Linux机器集群上,可为外部提供高可靠和高并发的存储访问.高可扩展.高可用.高性能.面向 ...

  3. 编写App测试用例的关注点

    如何做到测试用例的百分百覆盖一直是测试用例编写过程中的难点,首先在测试时我们经常会遇见一些常见的bug,那么我们可以在编写测试用例时考虑到这些点.    一:关于业务逻辑               ...

  4. (17)Spring Boot普通类调用bean【从零开始学Spring Boot】

    我们知道如果我们要在一个类使用spring提供的bean对象,我们需要把这个类注入到spring容器中,交给spring容器进行管理,但是在实际当中,我们往往会碰到在一个普通的Java类中,想直接使用 ...

  5. dubbo-源码阅读之dubboSpi实现原理

    dubboSPI实现思想跟javaspi的思想差不多javaspi是ServiceLoad 而dubbo自己写的是ExtensionLoader SPI接口定义 @Documented @Retent ...

  6. 使用Neo4j和简单分词算法实现菜品推荐系统

    背景:本推荐系统基于一款硬件产品--旺小宝桌牌.客人按下点餐按钮,扫码进入点餐界面,然后开始点自己喜欢的菜,在手机端下单.目前在成都已有近200家合作餐饮商家. 菜品推荐功能: 当客人在某商家使用桌牌 ...

  7. MyBatis在注解上使用动态SQL(@select使用if)

    1.用script标签包围,然后像xml语法一样书写 @Select({"<script>", "SELECT * FROM tbl_order", ...

  8. Google Style Guides-Shell Style Guide

    作者声明 这篇翻译文章对我来说是有点小挑战的.由于我英语实在非常烂,勉强能够看懂一些技术文档,能够猜出大概的含义.可是翻译对我来说算是一个挑战,看英文文档已经不是一天两天的事了,可是这个篇文章却是我的 ...

  9. C算法与数据结构-线性表的应用,多项式求和---ShinePans

    /*---上机作业作业,二项式加法---*/ /*---By 潘尚 ---*/ /*---日期: 2014-5-8 . ---*/ /*---题目:---*/ //如果有两个稀疏多项式A和B,设计算法 ...

  10. Qt的Socket数据通讯的一个样例。

    QTcpServer类 用来侦听port ,获取QTcpSocket. QTcpSocket有  connected的信号(已经连接),还有readyread()信号,表示已经有数据发过来了.准备读取 ...