使用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; } }
Categories:
html.css.js
已禁用评论。