一、安裝lib-flexible

npm i lib-flexible -D

二、在main.js中引入

import 'lib-flexible/flexible'

三、在index.html文件中設(shè)置meta標(biāo)簽:

  <meta name='viewport' content='width=device-width , initial-scale=1.0'>

四、然后在項(xiàng)目中寫css時(shí)會自動將rem轉(zhuǎn)化為px,需要安裝px2rem這個(gè)工具

npm i px2rem-loader -D

四、修改配置文件

4.1有build文件夾

/build/util.js：
a、在cssLoader對象下面添加一個(gè)px2remLoader對象:

const px2remLoader = {
    loader : 'px2rem-loader',
    options : {
      //這個(gè)參數(shù)是通過psd設(shè)計(jì)稿的  寬度 / 10 來計(jì)算,這里以750為標(biāo)準(zhǔn)
      remUnit : 75  
    }
  }

b、然后將utils.js文件中的generateLoaders函數(shù)的loaders常量改為[cssLoader, px2remLoader]：

image.webp.jpg

 const loaders = [cssLoader, px2remLoader];

完成上訴配置后,在開發(fā)時(shí),只需要將設(shè)計(jì)稿上的尺寸寫出即可，如font-size:18px;就直接寫18px

4.2 無build文件夾（使用了vue cli3或3以上版本）

在項(xiàng)目根目錄下新建vue.config.js文件

const cssLoader = {
  loader: 'css-loader',
  options: {
    minimize: process.env.NODE_ENV === 'production',
    sourceMap: options.sourceMap
  }
}
// 新增px2remLoader
const px2remLoader = {
  loader: 'px2rem-loader',
  options: {
    remUnit: 75
  }
}

function generateLoaders (loader, loaderOptions) {
  // 新增px2remLoader
  const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]

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

重新啟動項(xiàng)目，即可自適應(yīng)（單位使用px）