移动端 H5 页面适配方案 —— lib-flexible

作者:赵金添 分类: 前端 发布于:2016-5-6 17:25 ė1759次浏览 60条评论
demo:
http://my.codelab.cn/2016-05-06/index.html


参考:
http://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html?utm_source=tuicool&utm_medium=referral
https://github.com/amfe/lib-flexible
https://design.google.com/devices/


相关概念:
设备像素比(device pixel ratio)
设备像素比简称为dpr,其定义了物理像素和设备独立像素的对应关系。它的值可以按下面的公式计算得到:
设备像素比 = 物理像素 / 设备独立像素
iPhone6的设备宽度和高度为375pt * 667pt,可以理解为设备的独立像素;而其dpr为2,根据上面公式,我们可以很轻松得知其物理像素为750pt * 1334pt。
目前视觉稿大小分为640,750以及,1125这三种。


使用:
<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
建议对JS做内联处理,在所有资源加载之前执行这个JS。执行这个JS后,会在<html>元素上增加一个data-dpr属性,以及一个font-size样式。JS会根据不同的设备添加不同的data-dpr值,比如说2或者3,同时会给html加上对应的font-size的值,比如说75px。


尺寸:
视觉稿宽度:750px
rem 基准值:75px
对于视觉稿上的元素的尺寸换算,只需要原始px值除以rem基准px值即可。例如240px * 120px的元素,最后转换为3.2rem * 1.6rem。


快速计算:
1. sass
@function px2em($px, $base-font-size: 16px) {
    @if (unitless($px)) {
        @warn "Assuming #{$px} to be in pixels, attempting to convert it into pixels for you";
        @return px2em($px + 0px); // That may fail.
    } @else if (unit($px) == em) {
        @return $px;
    }
    @return ($px / $base-font-size) * 1em;
}

2. px2rem
https://www.npmjs.com/package/px2rem
https://www.npmjs.com/package/postcss-px2rem


字体设置:
字体的大小不推荐用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;
}

本文出自 赵金添的前端博客@福州软件外包公司,转载时请注明出处及相应链接。

0
分享本文至:

发表评论

电子邮件地址不会被公开。必填项已用*标注


Ɣ回顶部