lib-flexible:移动端自适应方案

日期:2017-3-22 10:11 | 标签: | 阅读:241

这个库在手淘已经使用了近2年,而且已达到了较为稳定的状态.,本文同步自我的 issue blog 总结: 链接

库地址: https://github.com/amfe/lib-flexible

使用方式

提前引入库文件( 最好在所有资源加载 )

<script src="http://g.tbcdn.cn/mtb/lib-flexible/{{version}}/??flexible_css.js,flexible.js"></script>

解决痛点

实现原理

开发流程

定义基准尺寸

淘宝选择 iPhone6 作为基准设计尺寸,交付给前端的设计尺寸按 750px * 1334px 为准(高度会随着内容多少而改变)。

定义一套适配规则

前端开发人员通过一套适配规则自动适配到其他的尺寸。

特殊适配

用户体验无止境

淘宝适配流程

切图

使用工具切图可是一门大学问!

开源工具

本人更加青睐于 px2rem 插件,直接按照设计稿写样式,编译的时候转换为实际样式即可。

特殊适配

  1. 图片

    需要考虑 retina 屏幕,需要设计师提供不同尺寸的切图。

  2. 1px 适配

    如果 boarder 设置为 1px 可能在某些机型上出现模糊,原因是 lib-flexible 并没有兼顾所有机型的适配

  3. 字体适配

    不建议使用 rem,我们不希望文本在Retina屏幕下变小,另外,我们希望在大屏手机上看到更多文本,以及,现在绝大多数的字体文件都自带一些点阵尺寸,通常是 16px 和 24px ,所以我们不希望出现 13px 和 15px 这样的奇葩尺寸。

  4. svg样式适配/raphael

    存在的问题是,有些宽高度是作为 JS 函数的必选参数,并不能方便的在样式表中指定

问题

lib-flexible 不能与响应式布局兼容

其原理是通过修改 init-scale 来达到适配高物理分辨率。

iphone6 plus下的网页由于 lib-flexible 的作用,导致页面的 width 与实际物理分辨率的宽相等(device-width/init-scale),也就是1242个像素,完全达到了该媒介查询的范围。

1px 边框在 lib-flexible下如何处理

事实上 lib-flexible 只做了 IOS 下的处理,并没有做 android 的,不管怎样,还是很好的解决了 1px 问题,且看看微信以前是怎么做的

/* 这是一个mixin,用来设置顶部的边框,其它方向的代码没有贴出 (最初出自 WEUI)*/
.setTopLine(@c: #C7C7C7) {
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 1px;
    border-top: 1px solid @c;
    transform-origin: 0 0;
    transform: scaleY(0.5);
}

/* 应用举例 */
.weui_cell {
    // onepx
    position: relative;
    &:before {
        .setTopLine(@weuiCellBorderColor);
    }
}

如何处理 retina 屏下的 background-image

此方法同样是不适合 Android 机惹的祸

.retina-image(@background-image) {
  background-image: url("../img/@2x/@{background-image}?v=@@version");
  background-size: 100% 100%;
  background-position:left top;

  @media only screen and (-webkit-min-device-pixel-ratio: 2.5),
  only screen and (min--moz-device-pixel-ratio: 2.5), /* 注意这里的写法比较特殊 */
  only screen and (-o-min-device-pixel-ratio: 5/2),
  only screen and (min-device-pixel-ratio: 2.5),
  only screen and (min-resolution: 240dpi),
  only screen and (min-resolution: 2.5dppx) {
    & {
      background-image: url("../img/@3x/@{background-image}?v=@@version") !important;
    }
  }
  /*1dppx = 1devicePixelRatio, 1dppx = 96dpi. */
}

发现

Max 字体

字体最大超不过 54px,充分说明了 lib-flexible 只适配移动终端的本质。

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

默认字体

为了保证 html上的字体不破坏原有布局,在 body 上有或重置为默认字体大小

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

从之前实现迁移过来

由于之前 font-size 都是按照 px 做的,可能需要在末尾加一个 /*px*/ 标签,才能使用 px3em 插件进行转换。

参考

版权声明: 署名-非商业性使用-禁止演绎 4.0 国际(CC BY-NC-ND 4.0
Copyright ©2013-2017 | 粤ICP备14081691号 | yipeng手工打造 | 联系方式