手淘flexible.js框架使用和源代码讲解小结

什么是flexible.js

flexible.js是淘宝移动端自适应布局的解决方案之一。它主要实现的功能是：根据不同的屏幕宽度动态设置标签的字体大小，从而实现移动端页面的自适应布局。

使用方法

使用flexible.js，只需要在页面头部引入flexible.js即可。

<script src="https://g.alicdn.com/fdilab/lib-flexible/0.3.2/flexible.js"></script>

原理

flexible.js会根据屏幕宽度动态计算标签的font-size值，用于设置其他元素的大小。计算公式如下：

document.documentElement.style.fontSize = (window.innerWidth / 设计稿宽度) * 基准字体大小

其中，设计稿宽度是指你所设计的网页的屏幕宽度，基准字体大小是你所设定的字体大小。默认的设计稿宽度为750px，基准字体大小为50px。

例如，如果你设计的网页宽度为375px，基准字体大小为50px，则计算出来的标签的font-size为25px。

源代码讲解

flexible.js源代码主要分为两个部分：mediaQuery部分和flexible部分。

mediaQuery部分

mediaQuery部分主要定义了一些媒体查询，用于不同屏幕宽度下标签的font-size值。代码如下：

docEl.style.fontSize = (win.width / 750) * 50 + 'px';

其中，docEl是标签，win是window对象，750是默认的设计稿宽度，50是默认的基准字体大小。根据屏幕宽度的不同，这个值会自动调整。

dpi = 1 / devicePixelRatio;
scale = 1 / dpi;
metaEl = doc.createElement('meta');
metaEl.setAttribute('name', 'viewport');
metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');

这段代码主要是用于设置视口的缩放比例，禁用用户手动缩放。

flexible部分

flexible部分主要包含了一些方法和事件，用于初始化页面和响应不同屏幕宽度下标签的font-size值。

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;
}

这段代码主要是用于计算和设置标签的font-size值。其中，dpr是设备像素比，一般是1或2，rem是设置的字体大小。

win.addEventListener('resize', function() {
    clearTimeout(tid);
    tid = setTimeout(refreshRem, 300);
}, false);

这段代码主要是用于响应窗口大小变化事件，并重新计算标签的font-size值。

示例说明

示例1

在页面头部引入flexible.js之后，可以通过设置其他元素的大小来实现移动端页面的自适应布局。例如：

<style>
.box {
    width: 6.4rem;
    height: 3.6rem;
    background-color: red;
}
</style>

<div class="box"></div>

这段代码定义了一个背景为红色的

元素，宽度为6.4rem，高度为3.6rem。根据默认的设计稿宽度750px和基准字体大小50px，6.4rem的宽度相当于320px，3.6rem的高度相当于180px。

示例2

如果设计的网页宽度不是750px，需要在调用flexible.js之前手动设置设计稿宽度。例如，如果设计的网页宽度为640px，可以通过以下代码实现：

window.flexible = { 
    'designWidth': 640
};

这段代码会在window对象上添加一个flexible对象，并设置designWidth属性为640。此时，根据屏幕宽度的不同，标签的font-size值将会自动计算。

javascript

赞 (0)

0 0 打赏 微信扫一扫 支付宝扫一扫

生成海报