手淘框架是一个用来适配移动端的js框架,下面我们来讲解一下如何使用手淘的这套框架。

其实手淘框架的核心原理就是根据不同的width给网页中html跟节点设置不同的font-size,然后所有的距离大小都用rem来代替,这样就实现了不同大小的屏幕都适应相同的样式了,首先我们来说一下常用的移动设备。

iphone6:    375px*667px  实际像素:750px*1334px

iphone5:   320px*568px   实际像素:640px*1136px

iphone4:   320px*480px   实际像素:640px*960px

nexus5X(安卓): 411px *731px 实际像素:411px*731px

以上数据都来自于chrome浏览器- -!!!

其实我们的iphone手机都是视网膜屏幕,所以我们的实际像素因该是无力像素*视网膜屏的倍数。

然而我们在实际的开发中ui给出的图一般都是750X1334的,其实iphone6的像素和ui设计的像素是一样大小的,但是我们的开发如果都是按照6的px来设计,那么我们的其它比6小尺寸屏幕的所有设备都会面临width不够的问题。flexible就完美的解决了这个问题。

应用中我们只要设置好他的公共比的像素就ok了,比如说如果ui图的像素是750,那我们需要的就是750/10,我们需要的就是75,我们所有的width的固定px就都可以变换成用rem像素代替实现样式统一例如我们width需要200px那么我们就可以这样写:

width=200rem/75;从而实现样式的兼容(特别注意:因为css不支持样式的计算,我们需要用less活着sass类似的css编译执行就可以得到最终的rem的值了)

另外,我们根据不同dpr可以设置一些不同的样式来实现视网膜屏幕的高清屏幕!

[data-dpr="1"] .selector {
width: 10px;
height: 32px;
font-size: 14px;
}
[data-dpr="2"] .selector {
width: 20px;
height: 64px;
font-size: 28px;
}

我们根据不同的自定义属性data-dpr来设置不同的width和height 从而达到不同dpr屏幕具有不同的属性!(这个位置一般用来处理图片。。)

下面我们来讲解一下flexible的源代码:

;(function(win, lib) {

})(window, window['lib'] || (window['lib'] = {}));

首先这个最外层结构是最基本的封装类库的方法:函数立即调用,这样可以防止封装方法污染全局变量,jquery的源码也是一样的道理!

    var doc = win.document;
var docEl = doc.documentElement;
var metaEl = doc.querySelector('meta[name="viewport"]');
var flexibleEl = doc.querySelector('meta[name="flexible"]');
var dpr = ;
var scale = ;
var tid;
var flexible = lib.flexible || (lib.flexible = {});

doc取文档的document对象

docEl取到了我们html为根的整个dom树,后期我们需要向html插入dpr和font-size就是用这个属性

metaEl取meta标签里面name=viewport的元素,没有返回空,为了判断是否有自己设置的meta值来做一些逻辑

flexibleEl取meta标签里面name=flexible的元素,没有返回空,为了判断用户是否自己手动的设置了一些meta值

dpr表示的是取你手机屏幕的dpr值

scale表示取你meta里面的scale,会根据不同的scale设置dpr

我们需要了解的大概就是上面的这些需要用到的属性!

     if (metaEl) {
console.warn('将根据已有的meta标签来设置缩放比例');
var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/);
if (match) {
scale = parseFloat(match[]);
dpr = parseInt( / 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[]);
scale = parseFloat(( / dpr).toFixed());
}
if (maximumDpr) {
dpr = parseFloat(maximumDpr[]);
scale = parseFloat(( / dpr).toFixed());
}
}
}

这段代码是判断你的meta标签里面是不是设置了name=viewport属性,如果你设置了viewport并且设置了initial-scale(初始屏幕的大小)我们将取到这个值作为dpr(做了逻辑运算,如果你的页面初始的放大为二,那么我们的dpr会设置成0)

同理我们如果动态设置了meta我们直接就取出来然后设置dpr和scale

    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 >= && (!dpr || dpr >= )) {
dpr = ;
} else if (devicePixelRatio >= && (!dpr || dpr >= )){
dpr = ;
} else {
dpr = ;
}
} else {
// 其他设备下,仍旧使用1倍的方案
dpr = ;
}
scale = / dpr;
} docEl.setAttribute('data-dpr', dpr);

之后如果我们动态设置了scale或者设置了meta标签里面的name=flexible的inital-scale,那么我们就根据自己设置的dpr在判断iphone手机的retina屏幕的dpr比值判断不同型号的倍数,最后我们在html上设置了data-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);
}
}

之后当我们之前没有设置metaEl标签的话,那么需要我们手动的去创建meta标签,实现移动端的适配

     function refreshRem(){
var width = docEl.getBoundingClientRect().width;
if (width / dpr > ) {
width = * dpr;
}
var rem = width / ;
docEl.style.fontSize = rem + 'px';
flexible.rem = win.rem = rem;
} win.addEventListener('resize', function() {
clearTimeout(tid);
tid = setTimeout(refreshRem, );
}, false);
win.addEventListener('pageshow', function(e) {
if (e.persisted) {
clearTimeout(tid);
tid = setTimeout(refreshRem, );
}
}, false);

这段代码的目的就是监听window里面的resize和pageshow方法来实现css样式的重绘。

函数里面就是实现取到当前设备的width之后根据width计算出rem的具体值,rem代表html的font-size,这里的rem代表的是一个自定义的rem,而不是rem属性!

    if (doc.readyState === 'complete') {
doc.body.style.fontSize = * dpr + 'px';
} else {
doc.addEventListener('DOMContentLoaded', function(e) {
doc.body.style.fontSize = * dpr + 'px';
}, false);
}

之后我们判断document对象是否处于complete状态,如果完成状态我们给body一个font-size=12*dpr的值,否则我们判断dom加载方法来实现body中的font-size的设置。这个设置是为了页面中字体的大小,而html中的font-size是为了设置页面的height,width等属性。

手淘flexible.js框架使用和源代码讲解的更多相关文章

  1. 通过media媒体查询设置ie7/8样式、使用media判断各机型、手淘flexible.js

    @media all and (min-width:1280px){ /* 所有设备宽度大于1280干嘛干嘛嘞... */ body{ background:#f00; } } @media (min ...

  2. 使用手淘flexible.js适配移动端布局

    下载flexible: https://github.com/amfe/lib-flexible //未压缩版 (function flexible (window, document) { var ...

  3. flexible.js框架改写

    前一阶段拜读了阿里团队的flexible.js,但是flexible的封装感觉还是不完美,因为flexible还是要依赖less/sass之类的编译执行,所以就存了一些问题,我把这些问题进行整理. 优 ...

  4. 解决手淘lib-flexible.js在移动端首次加载页面页面先放大后正常问题

    例如这样 然后这样 出现这样的原因一般是   静态的,即html里有一些静态的(即非js动态添加的) 如果在页面加载完成后,页面是用js动态添加的,这个问题就不太明显, doc.addEventLis ...

  5. 更新 手淘 flexible 布局 rem 单位适配问题

    详见链接 https://github.com/amfe/lib-flexible

  6. vue 的rem 配置和flexible.js的应用

    1.环境的配置: C:\Windows\System32\drivers\etc 2.多行注释: 光标放在函数中间,连按两次:“Ctrl+Alt+D”,就会出现以下的内容 3.总结使用过程:vue移动 ...

  7. 手淘的flexible.js解决手机适配问题

    如何使用flexible.js做手机适配 做移动端网页肯定需要做适配,以前都用的fixscreen.js,对比一下,觉得flexible.js更好吧,毕竟是大厂出的东西. 第一步要给页面加在viewp ...

  8. 手淘移动适配方案flexible.js兼容bug处理

    什么是flexible.js 移动端自适应方案 https://www.jianshu.com/p/04efb4a1d2f8 什么是rem 这个单位代表根元素的 font-size 大小(例如 元素的 ...

  9. 手淘适配-flexible

    目标 拿一个双11的Mobile页面来做案例,比如你实现一个类似下图的一个H5页面: 目标很清晰,就是做一个这样的H5页面. 痛点 虽然H5的页面与PC的Web页面相比简单了不少,但让我们头痛的事情是 ...

随机推荐

  1. ubinize的用法

    1.ubinize支持哪些选项 Usage: ubinize [options] <ini-file> Generate UBI images. An UBI image may cont ...

  2. 算法准备-分治算法解决第k位数的线性查找

    由作业士兵排队问题引出的 在一个划分成网格的操场上,n个士兵散乱地站在网格点上.网格点由整数最表(x,y)表示.士兵可以沿着网格边上.下.左.右移动一步,但在同一时刻一个网格上只能有一名士兵.按照军官 ...

  3. Android -- 怎么发出和接收广播, Broadcast, 电话拨号拦截,短信拦截

    1. 发送广播 使用以下三个API可以发送广播 public void click(View view){ Intent intent = new Intent(); intent.setAction ...

  4. Mysql语句转义

    String sqlStr = "SELECT * FROM t_sys_dic WHERE idPath LIKE" + "'" + "/19/20 ...

  5. 使用Bootstrap插件datapicker获取时间

    引入css和js <link rel="stylesheet" href="/${appName}/commons/css/datapicker/datepicke ...

  6. 一个n*n 的方格,要从左上角走到右下角,一次只能往右或往下走一步,求算法得出所有走动的方法数。

    题目一:一个n*n 的方格,要从左上角走到右下角,一次只能往右或往下走一步,求算法得出所有走动的方法数. 分析:对于第(i,j)个格子,只有向右走一步到达或者向左走一步到达,dp(i,j) = d(i ...

  7. vue.js单个slot

    刚开始看这个slot的时候有点蒙,想了几分钟才明白过来,汗颜 <script> var mycompoent = Vue.extend({ template:"<div&g ...

  8. 为了更好更方便地活着——爱上private

    刚开始接触OOP的时候,打心底里我不喜欢private与protected.我声明一个public然后不直接用它,不就跟private一样吗?在某些场合下,我还能偷偷地用一下public变量,这不是更 ...

  9. activity+fragment+listview+adapter+bean在同一个类中的套路

    1.xml activity_main.xml <?xml version="1.0" encoding="utf-8"?><FrameLay ...

  10. centos6.9使用yum安装mysql(简单粗暴,亲测有效)

    第1步.yum安装mysql[root@stonex ~]#  yum -y install mysql-server安装结果:Installed:    mysql-server.x86_64 0: ...