基于vue-cli的移动端适配问题

最近在做移动端的项目，为了移动端的适配，上网搜了一下，发现了一套可用方案，亲测有效哦

配方 lib-flexible + postcss-pxtorem

lib-flexible 用于设置 rem 基准值 flexible.js手淘框架，是一个用来适配移动端的js框架。 手淘框架的核心原理就是根据不同的width给网页中html跟节点设置不同的font-size，然后所有的距离大小都用rem来代替，这样就实现了不同大小的屏幕都适应相同的样式了。postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem 实际开发中，我们通过设计稿得到的值单位是 px，所以要将 px 转换成 rem 再写进样式中。 将 px 转换成 rem 我们将使用 postcss-pxtorem这个工具。

1. 在命令行中运行如下安装：

npm i lib-flexible --save npm i postcss-pxtorem -save

2. 在main.js中引入lib-flexible

import 'lib-flexible'

3. 在index.html中引入：移动适配meta标签（一般编辑器自动生成）

<meta name="viewport" content="width=device-width, initial-scale=1.0">

4. 更改配置 在 build/util.js 中 按如下两更改 （1）将px2rem-loader添加到cssLoaders中

const px2remLoader = { loader: 'px2rem-loader', options: { //一般设置75 remUnit: 37.5 //设计稿宽度/10； 37.5按照375设计图尺寸在设计，75安装750设计图尺寸设计 } }

（2）在generateLoaders方法中添加px2remLoader

function generateLoaders(loader, loaderOptions) { const loaders = options.usePostCSS ? [cssLoader, postcssLoader,px2remLoader] : [cssLoader,px2remLoader] if (loader) { loaders.push({ loader: loader + '-loader', options: Object.assign({}, loaderOptions, { sourceMap: options.sourceMap }) }) } // Extract CSS when that option is specified // (which is the case during production build) if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, fallback: 'vue-style-loader' }) } else { return ['vue-style-loader'].concat(loaders) } }

5.重启

npm run dev 重启项目，会发现自己设置的px被转为rem 了但是有一定的局限性以上实现转换适用于： （1）组件中编写的下的css （2）从index.js或者main.js中import ‘…/…/static/css/reset.css’引入css （3）在组件的中引入css

另外的情况不适用：

（1）组件中@import “…/…/static/css/reset.css (可考虑上面（2）、（3）的形式引入) （2）外部样式: （3）元素内部样式：style=”height: 417px; width: 550px;”

另外我要补充的是：在做移动端适配的时候我们不建议给字体也设置rem的单位，针对这种情况，我为字体适配的解决方案是使用媒体查询，文件以组件中@import “…/…/static/css/reset.css形式引入，可完美解决移动端适配问题