Flexible.js可伸缩布局实现方法详解
阿里团队开源的一个库。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做计量单位。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
基于 flexible 的 Vue 组件：Toast -- 显示框效果
基于flexible.js 的 Vue 组件 前言: 目前手头的移动端Vue项目是用手淘的 lib-flexible作适配的,并用px2rem 来自动转换成rem.关于lib-flexible和px2rem的配置,请移步 vue-cli 配置 flexible. 由于使用rem作适配,导致现有的很多移动端UI框架不能与之很好的配合,往往需要大动干戈更改UI框架的样式,背离了使用UI框架达到快速开发的初衷. 为了以后项目的组件复用,以及提高开发可复用组件的能力,特把平时项目中 常用的.简单的 组件
-
详解vue.js移动端配置flexible.js及注意事项
前言 最近在用vue做移动端项目,网上找了一些移动端适配的方案,个人觉得手淘团队flexible.js还是比较容易上手,在这里做下总结. 主体 flexible.js适配方案采用rem布局,根据屏幕分辨率大小不同,调整根元素html的font-size,从而达到每个元素宽高自动变化,适配不同屏幕 1.安装lib-flexible.js npm install lib-flexible --save 1.在项目入口文件main.js中引入lib-flexible import 'lib-flexi
-
vue-cli配置flexible过程详解
基于vue-cli配置手淘的lib-flexible + rem,实现移动端自适应 安装flexible npm install lib-flexible --save 引入flexible 在项目入口文件main.js中添加如下代码,引入flexible import 'lib-flexible' px 转 rem 使用 webpack 的 px2rem-loader,自动将px转换为rem 安装px2rem-loader npm install px2rem-loader --save-de
-
基于vue-cli配置lib-flexible + rem实现移动端自适应
安装flexible npm install lib-flexible --save 引入flexible 在项目入口文件main.js中添加如下代码,引入flexible import 'lib-flexible' px 转 rem 使用 webpack 的 px2rem-loader,自动将px转换为rem 安装px2rem-loader npm install px2rem-loader --save-dev 配置px2rem-loader 在vue-cli生成的文件中,找到以下文件 bu
-
Vue移动端用淘宝弹性布局lib-flexible插件做适配的方法
淘宝弹性布局lib-flexible lib-flexible并不单独使用,而是搭配px2rem-loader一起做适配方案,目的是自动将css中的px转换成rem,在项目中还是按照设计稿写上对应的固定像素(px)就行. 移动端适配的具体步骤 第一步:安装插件 lib-flexible npm i lib-flexible --save-dev 第二步:安装px2rem loader npm install px2rem-loader --save-dev 第三步:在main.js中引入lib-
-
js中flexible.js实现淘宝弹性布局方案
本文的内容就是介绍淘宝弹性布局方案lib-flexible实践,分享给大家供大家参考,具体内容如下 1. 页面需求 这是要做的页面效果(不要对设计置评,这不是开发人员决定的): 这是尺寸标注图(750*1334): 然后美工在750*1334的设计稿之上,按我的要求提供以下素材的切图: 包括两个下载按钮的背景图片,logo,底部梯形的渐变背景和body部分的mobile 背景图.注意这些图片都是在750*1334的设计稿里面切出来的,所以尺寸都是设计稿里的原始尺寸,比如android.png:
-
flexible.js实现移动端rem适配方案
需要了解的基础知识: 物理像素:物理像素又被称为设备像素,他是显示设备中一个最微小的物理部件.每个像素可以根据操作系统设置自己的颜色和亮度.正是这些设备像素的微小距离欺骗了我们肉眼看到的图像效果. 设备独立像素:也称为密度无关像素,可以认为是计算机坐标系统中的一个点,这个点代表一个可以由程序使用的虚拟像素(比如说CSS像素),然后由相关系统转换为物理像素. 设备像素比:简称为dpr,其定义了物理像素和设备独立像素的对应关系.它的值可以按此公式计算得到:设备像素比 ＝ 物理像素 / 设备独立像素
-
H5移动端适配 Flexible方案
一.移动端一些概念 视觉稿 (选取一款手机的屏幕宽高作为基准) 在前端开发之前,视觉 MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范往往会遵循以下两点: 1)首先,选取一款手机的屏幕宽高作为基准(以前是iPhone4 的320×480,现在更多的是iphone6的 375×667). 2)对于retina 屏幕(如: dpr=2),为了达到高清效果,视觉稿的画布大小会是基准的2 倍,也就是说像素点个数是原来的 4倍(对 iphone6而言:原
-
Flexible.js可伸缩布局实现方法详解
阿里团队开源的一个库.flexible.js,主要是实现在各种不同的移动端界面实现一稿搞定所有的设备兼容自适应问题. 实现方法: 通过JS来调整html的字体大小,而在页面中的制作稿则统一使用rem这个单位来制作.关键代码如下: ;(function(win, lib) { var doc = win.document; var docEl = doc.documentElement; var metaEl = doc.querySelector('meta[name="viewport&quo
-
js控制台输出的方法(详解)
console.log(object[, object, ...]) 在控制台输出一条消息.如果有多个参数,输出时会用空格隔开这些参数. 第一个参数可以是一个包含格式化占位符输出的字符串,例如: console.log("The %s jumped over %d tall buildings", animal, count); 上面的例子可以用下面的无格式化占位符输出的代码替换: console.log("The", animal, "jumped ov
-
JS截取字符串的方法详解
substr() 方法 substr() 方法可在字符串中抽取从 start 下标开始的指定数目的字符. stringObject.substr(start,length) start:必需.要抽取的子串的起始下标.必须是数值.如果是负数,那么该参数声明从字符串的尾部开始算起的位置. 也就是说,-1 指字符串中最后一个字符,-2 指倒数第二个字符,以此类推. length:可选.子串中的字符数.必须是数值.如果省略了该参数,那么返回从 stringObject 的开始位置到结尾的字串. 记住:
-
node.js连接mongoose数据库方法详解
目录 创建项目命令 连接mongoose数据库 配置跨域 运行 创建项目命令 express --view ejs 项目名 进入项目,我们需要npm i 下载配置文件 有时候会出先端口已经被占用的情况,我们可以在bin目录下www文件中修改端口 连接mongoose数据库 我们创建一个新的文件夹,然后在文件夹下创建一个连接mongoose数据库的文件,代码如下 var mongoose=require('mongoose') mongoose.connect('mongodb://127.0.0
-
node.js发送邮件email的方法详解
本文实例讲述了node.js发送邮件email的方法.分享给大家供大家参考,具体如下: 通常我们做node项目时,可能我们会碰到做一个简单的邮件反馈,那么我们今天就来讨论一下,其中遇到的各种坑. 总的来说做这个东西,我们可能需要node第三方依赖模块,来实现我们要达到的效果. 这里我推荐两个模块:https://github.com/pingfanren/Nodemailer npm install nodemailer //这个模块不错,github上星也比较多,还经常有维护,但是坑也比较多
-
JS访问DOM节点方法详解
本文实例讲述了JS访问DOM节点方法.分享给大家供大家参考,具体如下: 查找并访问节点 你可通过若干种方法来查找您希望操作的元素: 通过使用 getElementById() 和 getElementsByTagName() 方法 通过使用一个元素节点的 parentNode.firstChild 以及 lastChild 属性 getElementById() 和 getElementsByTagName() getElementById() 和 getElementsByTagName()
-
JS碰撞运动实现方法详解
本文实例分析了JS碰撞运动实现方法.分享给大家供大家参考,具体如下: 描述:撞到目标点弹回来(速度反转) 一.无重力的漂浮div var div1=document.getElementById("div1"); var iSpeedX=6; var iSpeedY=8; setInterval(function(){ var l=div1.offsetLeft+iSpeedX; var t=div1.offsetTop+iSpeedY; if(t>=document.docum
-
D3.js实现柱状图的方法详解
D3.js介绍 D3.js 是一个基于数据操作文档JavaScript库.D3帮助你给数据带来活力通过使用HTML.SVG和CSS.D3重视Web标准为你提供现代浏览器的全部功能,而不是给你一个专有的框架.结合强大的可视化组件和数据驱动方式Dom操作.这里也可以看到它是用SVG来呈现图表的,所以使用D3.js是需要一定的SVG基础的. 如何用D3.js实现柱状图? 柱状图里面有坐标轴和柱子.然而我们还需要SVG画布来画这些东西.先把大概的画图框架搭起来,代码如下(请注意此时我在body标签里添加
-
Vue.js路由vue-router使用方法详解
vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用.vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来.传统的页面应用,是用一些超链接来实现页面切换和跳转的.在vue-router单页面应用中,则是路径之间的切换,也就是组件的切换. 本文将以示例的形式来介绍vue-router的各个特性,一共包含6个示例,每个示例都有乞丐版,前5个示例有皇帝版. 乞丐版是将所有代码混杂在一起的HTML页面,皇帝版是基于vue-w
-
Bootstrap基本布局实现方法详解
看到了一篇 20 分钟打造 Bootstrap 站点的文章,内容有点老,重新使用 Bootstrap3 实现一下,将涉及的内容也尽可能详细说明. 1. 创建基本的页面 我们先创建一个基本的 HTML 模板页面,使用 sublime + emmet 可以直接创建这个页面. 1.1 新建一个文件, Ctrl + N 1.2 保存到页面文件中,Ctrl + S,命名为 index.html 1.3 在这个空白页面中,输入 html:5,然后直接按制表键 Tab,就应该可以看到一个基本的 HTML5 模