# anima-hd [![spm version](http://spmjs.io/badge/anima-hd)](http://spmjs.io/package/anima-hd)

---

移动端高清1px方案

## Install

```
$ spm install anima-hd --save
```

### hd效果图
1. flex模式
  * ![](http://k.taobao.net/lib/hd/flex.png)
* vw模式
  * ![](http://k.taobao.net/lib/hd/vw.png)
* vh模式
  * ![](http://k.taobao.net/lib/hd/vh.png)


## 介绍
1. anima-hd统一采用rem做单位, 想使用物理1px的就用1px, 比如 border: 1px solid red;
* 原理是根据rem将页面放大dpr倍, 然后viewport设置为1/dpr.
  * 比如iphone6 plus的dpr为3, 则页面整体放大3倍, `1px(css单位)`在plus下默认为`3px(物理像素)`
  * 然后viewport设置为1/3, 这样页面整体缩回原始大小. 从而实现高清.
* vw的模式是将rem跟width做关联, 以6.4rem = 100vw做基准.
  * 这么做的好处是设计稿的单位是多少, 除以100就可以给rem来使用;
  * 如果是less之类的预编译, 可以@px: 0.01rem; 然后`font-size: 24*@px;`来使用!
  * 也可以直接裸写`font-size: .24rem;`
* vh同理.
* 这里不实现vmin|vmax, 实际场景中遇到较少(一般都用flex), `如果有需求, 联系@写轮 添加.`
* 如果一个页面用到了flex + vw, 请用flex模式, vw用百分比或者css的vw等其他方式.
* 裸写rem: [http://k.taobao.net/act/2015/06/intro/intro-lend2.htm](http://k.taobao.net/act/2015/06/intro/intro-lend2.htm)


## Usage

```js
// 任何页面最佳模式是flex, 搞不定(比如活动页)才会选择vw或vh.
var hd;
// 根据页面所需选择不同的js; 常用的一般为flex和vw!
hd = require('anima-hd/lib/flex.js');
// 这里的vw的横向切分单位是6.4rem = 100vw;
hd = require('anima-hd/lib/vw.js');
// 这里的vw的横向切分单位是7.5rem = 100vw;
hd = require('anima-hd/lib/vw-750.js');
// 这里的vh的纵向切分单位是10.72rem = 100vh;
hd = require('anima-hd/lib/vh.js');

// 一般在viewport的meta标签之下就执行, 效果最佳.
// 如果不是离线包, 推荐直接内联js;
hd();
```

* 也可以内联远程js. `由于viewport的设置会引起页面抖动, 强烈建议复制代码内联`;
  * https://a.alipayobjects.com/anima-hd/1.0.5/flex.js
  * https://a.alipayobjects.com/anima-hd/1.0.5/vw.js
  * https://a.alipayobjects.com/anima-hd/1.0.5/vw-750.js
  * https://a.alipayobjects.com/anima-hd/1.0.5/vh.js