首页 > 代码库 > 移动端高清适配、布局开发解决方案

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

前言:移动端的适配是个大问题,特别是安卓,国内版本众多,不规则的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

 

   

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