移动端高清适配布局开发解决方案

Posted 2020-08-09 小兵传奇

前言：移动端的适配是个大问题，特别是安卓，国内版本众多，不规则的dpr数不胜数，为了适配各种移动终端，网易、百度、阿里各大厂都有自己的适配解决方案。要解决哪些问题呢？

• 不同设备下的统一视觉体验。
• 不需要手动设置viewport，根据当前环境计算出最适合的viewport。
• 支持任意尺寸的设计图，不局限于特定尺寸的设计图。
• 支持单一项目，多种设计图尺寸，专为解决大型，长周期项目。
• 支持px2rem转换方法，CSS布局，原始值不丢失。
• 有效解决移动端1像素问题。

 

1、首推阿里的flexible适配方案，酷、靓、好用。阿里无线前端团队开发的，手淘的H5页面在使用。

　　github传送门：https://github.com/amfe/lib-flexible/ 

　　flexible详解：https://github.com/amfe/article/issues/17

　　flexible一个案例：http://huodong.m.taobao.com/act/yibo.html

 

2、墨尘大大写的hotcss，比flexible稍轻量，开发利器。

　　github传送门：https://github.com/imochen/hotcss 

　　hotcss一个案例：http://imochen.github.io/hotcss/example/normal/

 

3、插件px2rem保留源文件px，将px转化成rem

　　npmjs传送门：https://www.npmjs.com/package/px2rem

　　配合gulp使用：gulp-px3rem  https://www.npmjs.com/package/gulp-px3rem

　　配合webpack使用：px2rem-loader  https://www.npmjs.com/package/px2rem-loader