使用flexible 做 H5 页面的适配

在网上找了一波。。。 发现一个实用工具  flexible.js  --  移动端自适应方案

Github:  https://github.com/amfe/lib-flexible

原文地址: http://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html

参考:http://div.io/topic/1092

 

 less eg:

/* 手机页面 */
@baseSize: 75;
/* 大小 rem 化 */
.px2rem(@name, @px) {
	// 基准值是 75 ,设计稿 是 750 --> iphone6: 375px * 2 / 10 = 75px
	// 除以10 是把页面 宽度划分10份处理
	@{name}: (@px / @baseSize ) * 1rem;
}

/* 字体处理 */
.px2px(@name, @px) {
	@{name}: round(@px / 2) * 1px;

	[data-dpr="2"] & {
		@{name}: @px * 1px;
	}
	// for mx3
	[data-dpr="2.5"] & {
		@{name}: round(@px * 2.5 / 2) * 1px;
	}
	// for 小米note
	[data-dpr="2.75"] & {
		@{name}: round(@px * 2.75 / 2) * 1px;
	}

	[data-dpr="3"] & {
		@{name}: round(@px / 2 * 3) * 1px;
	}
	// for 三星note4
	[data-dpr="4"] & {
		@{name}: @px * 2px;
	}
}