vue移动端适配 -- px2rem

转载于 2018-11-19 17:20:56 发布 · 340 阅读

文章标签：

#px2rem #vue #适配

vue 同时被 2 个专栏收录

17 篇文章

订阅专栏

px2rem

1 篇文章

订阅专栏

本文介绍如何使用px2rem-loader和lib-flexible在Vue项目中实现移动端的px到rem单位转换，以达到屏幕适配的目的。通过在main.js中引入flexible.js和修改utils.js中的generateLoaders方法，可以将所有px单位自动转换为rem单位。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue移动端适配 -- px2rem

安装

npm install px2rem-loader lib-flexible --save

在main.js中引入

import 'lib-flexible/flexible.js'

在build中utils.js找到generateLoaders 方法，添加以下代码

const px2remLoader = {

  loader: 'px2rem-loader',

  options: {

    remUnit:37.5

  }

}

  

  // generate loader string to be used with extract text plugin

  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

      })

    })

  }

重启项目后，px会变成rem