Package detail

umi-hd

umijs10.9kMIT5.0.1

移动端高清1px方案

readme

umi-hd

迁移至内网,作者:@写轮

重要决定

安卓提供了 vw-no-android-hd 版, 由于安卓手机存在各种兼容问题, 放弃安卓的高清也是一种选择. 总比老是出线上故障好

整体介绍

  • vw是最简单的, 全部自动拉伸, 做页面无视屏幕适配.
    • 当下活动页开发的最佳选择.
  • flex是需要写适配布局的, 高清兼容好. 安卓UC内核也兼容.
    • 当下项目开发最佳的选择.
    • flex可以加任意参数等比放大, 不受屏幕大小限制;
  • vl是iOS上最完美的适配, 既能flex, 又能vw, 又能高清. 缺点是安卓完全不支持高清!
  • vh是打酱油的, 纯粹迎合下vw;

Install

$ npm install umi-hd --save

Usage

// 默认的vl模式; 不带viewport缩放了, 用rem兼容了vw的单位, 用px做flex适配, 0.5px的单位做高清!
import vl from 'umi-hd';
vl();
// 等价于默认的;
vl(100, 750);
// 自定义文字大小
vl(32, 750);
// 设计稿是640的
vl(100, 640);

// 以前的flex模式, 通过compile之后进入到了lib文件夹下;
import flex from 'umi-hd/lib/flex';
flex();
// 等价于默认的;
flex(100, 1);
// 如果有的rem基准单位是16px, 可以这样修改
flex(32);
// 有的希望plus下字体放大一些比例, 可以这样使用;
flex(100, 414/375);

// vw推荐用法
import vw from 'umi-hd/lib/vw';
import vw from 'umi-hd/lib/vw-vw-no-android-hd';
vw();
// 等价于, iPhone 5s下就是1rem=100px, 原始比例1倍;
vw(100, 750);
// 如果有的设计稿是640px;
vw(100, 640);
// 有的希望字体是浏览器默认的16px;
vw(32, 640);

// vh推荐用法
import vh from 'umi-hd/lib/vh';
vh();
// 等价于默认的iPhone6设计稿, 1334-64;
vh(100, 1270);
// 640稿子是 568*2-64
vh(100, 1072);
// 有的希望字体是浏览器默认的16px;
vh(32, 1072);

License

Component is released under the MIT license.

changelog

5.0.0 / 2017-12-25

  • fix: 适配 iPhone X, 新增 viewport-fit=cover

4.1.2 / 2017-02-07

  • doc: 更新文档

4.1.1 / 2016-12-07

  • fix: fix android BUG

4.1.0

  • 新增vw-no-android-hd模式, 安卓问题太多了! 业务自己看着选吧.

4.0.2

  • 更新文档, 加上gif图, 感觉一图胜万言!

4.0.0

  • 使用es6全模式;
  • API修改;
  • 恢复vh版本, 发现有业务使用.
  • 新增vl版本, 不做viewport缩放, rem用来兼容vw, px单位保持原作用不变, 高清使用0.5px的方案; 期待安卓高版本跟进iOS的机制!

3.0.2

  • 修复es6不识别的问题;

3.0.1

  • 修复export default不识别的问题;

3.0.0

  • 重构所有API, 删掉vw-750以及vh的版本. vh需求极少, 想用的用回2.0.4版本即可;
  • vh-750版本通过require('anima-hd/vw.js')(100, 750);来实现
  • flex支持动态修改scale参数, 方便在plus下想放大字体的需求;
  • 源码用es6的语法实现, 简化各种兼容代码;

2.0.4

IMPROVED 兼容cdn的版本, 更新到atool-build;

2.0.3

IMPROVED 更新到tnpm;

2.0.2

FIXED iOS9.3下BUG修复

2.0.1

FIXED vw模式下的scale也要同步修改;

2.0.0

CHANGED 对iOS9.3做临时处理;

1.0.4

CHANGED 移除target-densitydpi=device-dpi的支持; 不支持scale的统一不做高清处理!

1.0.3

CHANGED 安卓机兼容UC内核;

1.0.1

CHANGED 让output文件可以直接执行. CHANGED 更新README.MD

1.0.0

NEW 初始化代码