依賴

專案基礎配置使用 vue-cli 生成

自適應方案核心： 阿里可伸縮佈局方案 lib-flexible

px轉rem：px2rem，它有webpack的loader px2rem

開始

先使用vue腳手架初始化一個webpack專案

vue init webpack 專案名

專案初始化好了之後，進入專案目錄中 (cd 專案名) 安裝 lib-flexible 和 px2rem-loader

npm i lib-flexible -S

npm i px2rem-loader -D

安裝好了之後還需要在專案的入口檔案 main.js 裡引入 lib-flexible

// main.js

import 'lib-flexible'

接下來為了驗證 lib-flexible 是否生效，可以將app.vue中的內容改成：

<template>
 <div class="wrapper">
 <div class="box1"></div>
 <div class="box2"></div>
 <div class="box3"></div>
 <div class="box4"></div>
 <div class="box5"></div>
 </div>
</template>

<style>
 * {
 margin: 0;
 padding: 0;
 }
</style>

<style scoped>
 .wrapper div {
 height: 1rem;
 }
 .box1 {
 width: 2rem;
 background-color: coral;
 }
 .box2 {
 width: 4rem;
 background-color: skyblue;
 }
 .box3 {
 width: 6rem;
 background-color: palegreen;
 }
 .box4 {
 width: 8rem;
 background-color: wheat;
 }
 .box5 {
 width: 10rem;
 background-color: darkred;
 }
</style>

但是在實際開發中，我們通過設計稿得到的單位是px，所以要將px轉換成rem再進行樣式中。但如果都需要手動轉的話，就很麻煩，所以需要一個工具替我們完成這項工作，這個時候就需要配置px2rem了，當然，編輯器可能也要對應的外掛。

在 vue-cli 生成的 webpack 配置中，vue-loader 的 options 和其他樣式檔案 loader 最終是都是由 build/utils.js 裡的一個方法生成的。我們只需在 cssLoader 後再加上一個 px2remLoader 即可，px2rem-loader 的 remUnit 選項意思是 1rem=多少畫素，結合 lib-flexible 的方案，我們將 px2remLoader 的 options.remUnit 設定成設計稿寬度的 1/10，這裡我們假設設計稿寬為 1920px。

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

 const px2remLoader = {
 loader: 'px2rem-loader',options: {
  remUnit: 192
 }
 }
 //...

放進loaders陣列中

//utils.js
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
  })
  })
 }
//...

修改配置以後重啟伺服器，將原來app.vue檔案中的樣式改成：

<style scoped>
.wrapper div {
 height: 1rem;
}
.box1 {
 /* 750 * 20% */
 width: 150px;
 background-color: coral;
}
.box2 {
 /* 750 * 40% */
 width: 300px;
 background-color: skyblue;
}
.box3 {
 /* 750 * 60% */
 width: 450px;
 background-color: palegreen;
}
.box4 {
 /* 750 * 80% */
 width: 600px;
 background-color: wheat;
}
.box5 {
 /* 750 * 100% */
 width: 750px;
 background-color: darkred;
}
</style>

可以看到，適配依然生效。

以上是vue-cli2配置px2rem的方式，

如果腳手架用的是vue-cli3的話，由於vue-cli3 生成的目錄結構沒有build檔案，所以在配置上也有一些不同。

vue-cli3配置方式：

找到檔案 node_modules/@vue/cli-service/lib/config/css.js，新增規則：

 config.module
  .rule('css')
  .test(/\.css$/)
  .oneOf('vue')
  .resourceQuery(/\?vue/)
  .use('px2rem')
  .loader('px2rem-loader')
  .options({
   remUnit: 75
  })

remUnit的值請自行修改。

但是有一個問題，我明明設定的寬度是按1920來的，為什麼計算出來1rem=54px?

是不是外掛哪裡出了問題，或者在哪裡定義過跟54或者540相關的東西？

（我這裡全域性搜尋了54找到flexible.js檔案）

找到flexible.js檔案看下：

找到問題了就解決問題，既然檔案把螢幕寬度寫死了，那就不寫死：

function refreshRem(){
  var width = docEl.getBoundingClientRect().width;
  if (width / dpr > 540) {
   width = width * dpr;
  }
  var rem = width / 10;
  docEl.style.fontSize = rem + 'px';
  flexible.rem = win.rem = rem;
 }

現在再重啟專案，看一下執行結果：

end

有問題歡迎指正！

以上這篇vue實現PC端解析度適配操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。