anima-hd

移动端高清1px方案

Install

$ spm install anima-hd --save

hd效果图

1. flex模式

• 
• vw模式
  • 
• vh模式
  • 

介绍

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

Usage

// 任何页面最佳模式是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