vue移动端flexible.js结合Muse-ui使用的小坑

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/zhanglong_web/article/details/78649717

  因为公司有个项目有webapp的需求,在前期准备的期间考虑过使用ionic,毕竟该项目web端的框架使用的是Angular,项目组的人也都比较熟悉,但是我们毕竟只是做个移动的网页,不想用ionic那么繁琐的东西,最终我还是选了vue。
  开始的设想是vue+Muse-ui或者Mint-ui(各有优缺点)+flexible.js,在做到手机端兼容的同时结合ui框架让项目更好看些,然后就开始动手做!
  这个时候需要说下flexible.js,阿里开源的移动端适配代码,很好用,不过也有他的缺点,比如不兼容ipad,因为公司的项目没有考虑兼容ipad,也就没想那么多,还是使用flexible.js。相信使用过它的人都知道,有个东西叫做px2rem,很方便我们直接对着设计稿写px的代码(假使设计稿是750px的),我们只需要在vue-cli生成的项目文件夹build里增加如下配置:

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

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
        })
      })
    }

  当然别忘了main.js里增加 :import ‘lib-flexible’
  这样我们写的px的代码,webpack会自动帮我们去转成rem的形式以做到适配各个移动设备,但是问题来了,我们在使用Muse-ui或者Mint-ui的时候样式会变的很小,看着非常别扭,这个地方纠结了很久,为什么没有做的想象中的自适应?
  原因是我们之前配置的px2rem也会把我们引入的ui组件也转换成rem的格式,本身组件已经是为移动端做了适配,px2rem又转成了rem就导致其样式变的很小,解决办法就是我们还是使用flexible.js(中间有放弃使用的想法,想直接写个rem.js去动态查询然后设置font-size,单位也就全使用手写的rem,不过还是打消了这个念头),然后不使用px2rem,也就是不要上面的配置

// px2remLoader暂时不用
function generateLoaders (loader, loaderOptions) {
    const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
    if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
        })
      })
    }

  可能有人会问那这个时候flexible.js还有什么作用呢?答案是我们在需要转rem的地方手动写rem,这样引入的ui组件样式就不会变小,而是很美观了。我用的IDE是VScode,设计稿750的话,如果每个需要适配的单位都去计算rem是很麻烦的,推荐px to rem这个插件,然后将16设置为75(设计稿为750px)
这里写图片描述
  这个时候我们直接写px,选中后alt+z就直接转换为rem了,这也算项目刚开始遇到的一个小坑吧。

没有更多推荐了,返回首页