Mobile high-definition adaptation, layout development solutions

Foreword: The adaptation of the mobile side is a big problem, especially Android, the domestic version is numerous, irregular DPR countless, in order to adapt to a variety of mobile terminals, NetEase, Baidu, Ali each of the major manufacturers have their own matching solutions. What problems do you want to solve?

• A unified visual experience across devices.
• No manual setup is required viewport , and the best fit is calculated based on the current environment viewport .
• Support any size of the design, not limited to the specific size of the design drawings.
• Support a single project, a variety of design drawings size, designed to solve large, long-cycle projects.
• Support px2rem The conversion method, CSS layout, the original value is not lost.
• Effectively solves the 1 pixel problem on the mobile side.

1, the flexible of Ali's adaptation program, Cool, beautiful, easy to use. Ali Wireless front-end team developed, hand-H5 page in use.

GitHub Portal: https://github.com/amfe/lib-flexible/

Flexible Explanation: HTTPS://GITHUB.COM/AMFE/ARTICLE/ISSUES/17

Flexible a case: http://huodong.m.taobao.com/act/yibo.html

2, ink dust greatly written hotcss, slightly lighter than flexible, the development of a weapon.

GitHub Portal: Https://github.com/imochen/hotcss

Hotcss a case: http://imochen.github.io/hotcss/example/normal/

3, plug-in Px2rem keep the source file px, convert px into REM

NPMJS Portal: Https://www.npmjs.com/package/px2rem

Use with Gulp: Gulp-px3rem Https://www.npmjs.com/package/gulp-px3rem

Use with Webpack: Px2rem-loader https://www.npmjs.com/package/px2rem-loader

Mobile high-definition adaptation, layout development solutions