vuejs使用lib-flexible适配利用px2remLoader进行单位换算

还在为rem vm px转换在那里傻傻的写,奉上自用终极方案!

lib-flexible

1.安装lib-flexible
npm i lib-flexible –save

2.在项目入口文件App.vue中引入lib-flexible

import ‘lib-flexible/flexible.js’

 

 

px2remLoader

1.安装px2remLoader

npm install px2rem-loader -S

2.在build目录下的 utils.js

 function generateLoaders (loader, loaderOptions) {
    const loaders =  [cssLoader, postcssLoader,px2remLoader] 

    if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
        })
      })
    }

const loaders = [cssLoader, postcssLoader,px2remLoader] //在这里加入

 

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

 

stylus

安装 cnpm stylus i stylus -S

然后安装 cnpm  stylus-loader -S

使用

<style lang="stylus" style="stylesheet/stylus">
fontsize(size)
 [data-dpr="1"] & 
 font-size: unit(size/2,px)
 [data-dpr="2"] & 
 font-size: unit(size,px)
 [data-dpr="3"] & 
 font-size: unit((size/2)*3,px)
#app
 font-family: 'Avenir', Helvetica, Arial, sans-serif
 -webkit-font-smoothing: antialiased
 -moz-osx-font-smoothing: grayscale
 text-align: center
 // color: #2c3e50
 margin-top: 60px
 fontsize(22px)
</style>

 

完美解决移动端开发的px转rem的坑!

2017-12-19 15:26:40 更新

 

上面的的fontsize函数可以不用写,lib-flexible已经帮我们处理过了,因为我删除之后也是可以正常换算的,这里真是自作聪明了。

 

另外由于安装了 px2remLoader 默认会把文字的px单位转换成rem单位,这里请使用

font-size:24px; /*px*/
或者
font-size:30px; /*on*/

来设置不需要转换rem;

 

注:这里的css必须使用“  ; ”分号进行结束!想继续往下研究的可以去看看 lib-flexible 2.0 用vw适配

 

2018-4-2 16:30:39

 

如果需要使用

flexible.js

px2remLoader暂时不用,使用px to rem这个插件,然后将16设置为75(设计稿为750px)

 

 

这个时候我们直接写px,选中后alt+z就直接转换为rem了。

One thought on “vuejs使用lib-flexible适配利用px2remLoader进行单位换算

中青看点是真的吗进行回复 取消回复

电子邮件地址不会被公开。 必填项已用*标注