vue移动端适配

移动端项目，最麻烦的就是去写适配，我们都知道使用viewport

 <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

最近写了一个移动的项目推广，收到大佬的推荐，开始使用新的淘宝适配插件 

http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js

使用方法也很简单，直接贴步骤：

<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
2:他是基于font-size:75px;
所以我们的css样式  测量的px/75 就是我们想要的rem
.text{
    width:200px;
    height:200px;
}
 转为rem
.text{
    width:2.6rem;
    height:2.6rem;
}
以上就是使用方法啦~也可以本地引入先从git 上拉去下来哦~

但是这样对于比较小的移动端项目来说还可以计算，如果是很大的项目，我们的开发效率这样在进行计算就会很低了

这样的时候，就需要，配合 px2rem 来使用，可以对我们的px 值进行转化，最常见的就是vue 项目

1：安装
npm i lib-flexible 

2： 在main.js 中引入

import 'lib-flexible/flexible'

3：安装px2rem

npm i px2rem-loader

4: 在build / utils.js 中配置

exports.cssLoaders = function (options) {
  options = options || {}

  const cssLoader = {
    loader: 'css-loader',
    options: {
      sourceMap: options.sourceMap
    },
  }

  const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUint: 75
    }
  }

  const postcssLoader = {
    loader: 'postcss-loader',
    options: {
      sourceMap: options.sourceMap
    }
  }

  // generate loader string to be used with extract text plugin
  function generateLoaders (loader, loaderOptions) {
    const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader,px2remLoder]
    

    
    if (options.usePostCSS) {
        loaders.push(postcssLoader)
    }

    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,
        publicPath:'../../',
        fallback: 'vue-style-loader'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
  }

这样的话，我们只需要把我们的测量值写入css 中就可以了，让下看哦~

我们的测量值是多少直接就写多少
.box{
    width: 150px;
    font-size: 28px; 
    border: 1px solid #ddd; 
}

配置好以后，

.box{
    width: 2rem;
    border: 1px solid #ddd;
}
[data-dpr="1"] .selector {
    font-size: 14px;
}
[data-dpr="2"] .selector {
    font-size: 28px;
}
[data-dpr="3"] .selector {
    font-size: 42px;
}
会对不同是屏幕进行转换

好啦~这样一个完整的移动适配就可以很完美的结束了~亲测有效哦~正在前端路上探索的小伙伴们~继续分享~继续加油