如果和还不了解移动 web 布局方案, 可以先看看这篇文章 [移动 Web 适配方案]
这篇文章涉及的代码
关于 lib-flexible 可伸缩布局方案
flexible 方案是手淘经过多年的摸索和实战, 总结出的一套移动端适配方案. 早期的 flexible 的方案 (lib-flexible) 通过动态修改 viewport 的方式来设置视口, 出现了很多问题: 安卓端 1 像素问题 , 不能与响应式兼容 , 与 ui 框架搭配出现长度问题 等等. 最新版 (amfe-lexible) 已经不再修改 viewport , 而是统一使用理想视口.
1.vue 2.x + lib-flexible 方式
这是一种过时的方案, 这里就略过
2.Vue 2.x + amfe-flexible 方式
(1)安装 amfe-flexible
$ NPM install amfe-flexible --save
(2)在 main.JS 中引入 amfe-flexible
import 'amfe-flexible'
(3)viewport 设置理想视口
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
(4)按照视觉稿布局(以 750px 为例)
把视觉稿分成 100 份来看待(为了以后兼容 vh,vw 单位). 每一份被称为一个单位 a. 同时, 1rem 单位认定为 10a. 拿 750 的视觉稿举例:
- 1a = 7.5px
- 1rem = 75px
因此, 对于视觉稿上的元素的尺寸换算, 只需要 原始 px 值除以 rem 基准 px 值即可. 注意 字体不使用 rem 单位
在实际生产当中, 如果每一次计算 px 转换 rem 都会影响开发效率
目前主要有两种方式来解决这个问题
(a)CSSREM 是一个 CSS 的 px 值转 rem 值的 Sublime Text3 自动完成插件.
(b)除了使用编辑器的插件之外, 还可以使用 CSS 的处理器来帮助大家处理. 比如说 Sass,Less 以及 PostCSS 这样的处理器.
这里主要讲下使用 PostCSS 方式解决这个问题, 这也是我常用的方式
如何在 vue-cli 中使用 PostCSS 方式解决这个问题?
这里介绍三款将 px 转换为 rem 插件
postcss-plugin-px2rem 官方文档: https://www.npmjs.com/package/postcss-plugin-px2rem
postcss-pxtorem 官方文档: https://www.npmjs.com/package/postcss-pxtorem
postcss-px2rem 官方文档: https://www.npmjs.com/package/postcss-px2rem
这三种插件 postcss-pxtorem 和 postcss-px2rem 类似, postcss-plugin-px2rem 这个插件 配置选项上有 exclude 属性, 它可以配置 是否对 某个文件夹下的所有 CSS 文件不进行从 px 到 rem 的转换. 我们可以利用这个特性, 排除掉我们不要转换处理的文件夹.
在 vue-cli2 中使用 postcss-pxtorem 时配置
首先安装 postcss-pxtorem NPM install postcss-pxtorem --save-dev
找到. postcssrc.JS 文件配置 postcss-pxtorem, 在 plugins 对象下添加属性.
- "postcss-pxtorem": {
- "rootValue": 75,
- "propList": ['*','!font','!font-size']
- },
在 vue-cli3 中使用 postcss-pxtorem 时配置
这个看你的的选择, 有可能在 postcss.config.JS 文件或者 package.JSON 文件. 配置方式和 vue-cli2 一样
最后就按照 750px 视觉稿直接用 px 开发!!! 当然你可能需要更多的 PostCSS 插件来辅助的你的开发, 可以参考我的另一篇文章 Vue2.x 中使用 vw 完成移动端页面适配对有关插件的介绍
amfe-flexible.PNG
3.Vue 2.x +amfe-flexible + 使用 ui 框架方式
这种方式和 Vue 2.x +amfe-flexible 几乎一样. 唯一的不同是, 我们需要使用 postcss-plugin-px2rem 进行 px 到 rem 转换. 因为我们需要排除 ui 框架目录, 避免 ui 变形.
找到. postcssrc.JS 文件配置 postcss-plugin-px2rem, 在 plugins 对象下添加属性.
- "postcss-plugin-px2rem":{
- "rootValue": 75,
- "propBlackList":['font','font-size'],
- exclude: /(node_module)/,
- }
mint+flexible.PNG
来源: http://www.jianshu.com/p/6af4d83b532d