欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue移动端项目px转化rem

程序员文章站 2022-04-11 11:50:28
...

前端开发者都知道,pc端使用的是px 像素值,而移动端项目 需要使用到rem ,两者之间的通常是需要换算的,显得非常麻烦,后来通过查找适用插件非常方便!!!

vue项目移动端插件flexible

配合vue脚手架使用非常方便

首先:

首先你需要使用脚手搭建架一个项目,搭建步骤就不说了…
然后安装 lib-flexible

npm i lib-flexible --save

然后在main.js 引入使用

import 'lib-flexible/flexible'

在安装 px2rem-loader

npm install px2rem-loader

然后在项目build文件夹下找到until.js,将px2rem-loader添加exports.cssLoaders 中

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

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

//将代码放入 postcssLoader  方法下
   const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 75
    }
  }

然后更改文件 generateLoaders

function generateLoaders (loader, loaderOptions) {
//  const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]  //将源文件更改为下列方式
const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]
		
    if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
        })
      })
    }
   

最后 npm run dev 运行项目就行了!!
使用方法如下:

		font-size:16px;
		border: 1px solid black; /*px*/

后边标注px的页面可以显示px值 而没有转化为rem
css 后不标注 px 的 页面显示转化为rem

上边只是根据查找得出的简单使用方式,请会的朋友 批评指正