使用Flexible实现手机H5页面的终端适配

Posted on   |   In   |  

参考链接

想要看为什么要使用Flexible以及代码原理可以看上面’大漠’的文章，这篇写的很清楚

使用方法

载入js文件

建议对于js做内联处理，在所有资源加载之前执行这个js。

执行这个js后，会在html（也就是document.documentElement）上增加一个data-dpr属性，以及font-size样式。

之后页面中的元素，都可以用rem单位来设置。html上的font-size就是rem的基准像素。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>flexible</title>
    <link rel="stylesheet" href="index.css">
    <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
</head>
<body>
<div class="ex">
    <img src="1.png" alt="">
</div>

<script type="text/javascript">
// alert(lib.flexible.rem);

</script>   
</body>
</html>

把视觉稿中的px转换成rem

首先，目前视觉稿大小分为640，750以及，1125这三种。

当前方案会把这3类视觉稿分成100份来看待（为了以后兼容vh，vw单位）。每一份被称为一个单位a。同时，1rem单位认定为10a。拿750的视觉稿举例：

1a = 7.5px
1rem = 75px

因此，对于视觉稿上的元素的尺寸换算，只需要原始px值除以rem基准px值即可。例如240px 120px的元素，最后转换为3.2rem 1.6rem。

字体不使用rem的方法

字体的大小不推荐用rem作为单位。所以对于字体的设置，仍旧使用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;
}

一些常用APIs

[Number] lib.flexible.dpr

当前页面的dpr值

[Number] lib.flexible.rem

当前页面的rem基准值

[Number|String] lib.flexible.rem2px([Number|String digital])

把rem转换为px

[Number|String] lib.flexible.px2rem([Number|String digital])

把px转换为rem

lib.flexible.refreshRem()

刷新当前页面的rem基准值

栅格系统

还有栅格系统，我暂时没用到，需要使用的可以去上面链接的github

lib-flexible原理

原理其实很简单

通过检查当前设备，动态的生成meta标签，并且修改html标签样式

iphone retina的动态生成的meta标签

<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">

Android的meta标签

<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

获取html 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;
}

需要更改设计稿尺寸

lib.flexible.rem

分析 http://m.taobao.com

  • 无法上下滑动，点击等等
  • 使用的是640px的设计稿
  • 加载速度很快，感觉部分图片使用的是懒加载，再往下拉到另外一个模块的时候是异步加载
  • 没有使用图片精灵，感觉因该是图片经常需要修改

其他

今天突然想了想发现有其他用处，由于html的font-size是根据页面宽度制定的，所以整个页面的宽度是已知的，在手机端布局过程中宽度一般用百分比表示，而子元素的padding/margin又是根据父元素的宽度来制定的，所以为了使得上下左右的宽度一致可以使用rem+百分比的方法

整个后面会做一个测试页面进行实践