<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>

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

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

//utils.js
function generateLoaders (loader, loaderOptions) {
 const loaders = options.usePostCSS "htmlcode">

<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(/\"" src="/UploadFiles/2021-04-02/20200803110501.jpg">

remUnit的值请自行修改。
但是有一个问题，我明明设置的宽度是按1920来的，为什么计算出来1rem=54px"" src="/UploadFiles/2021-04-02/20200803110511.jpg">
是不是插件哪里出了问题，或者在哪里定义过跟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端分辨率适配操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。