【无标题】

最新推荐文章于 2024-07-11 15:29:37 发布

李夏洛

最新推荐文章于 2024-07-11 15:29:37 发布

阅读量124

点赞数

分类专栏： vue 文章标签：前端 vue.js

本文链接：https://blog.csdn.net/qq_48169457/article/details/128954131

版权

vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

3分钟解决 vue pc端自适应问题

- 实际操作

实际操作

安装 postcss-px2rem及px2rem-loader

npm install postcss-px2rem px2rem-loader --save

在utils文件下创建flexible.js文件，内容如下：

(function flexible(window, document) {
    var docEl = document.documentElement;
    var dpr = window.devicePixelRatio || 1;
  
    // adjust body font size
    function setBodyFontSize() {
      if (document.body) {
        document.body.style.fontSize = 12 * dpr + "px";
      } else {
        document.addEventListener("DOMContentLoaded", setBodyFontSize);
      }
    }
    setBodyFontSize();
  
    // set 1rem = viewWidth / 10
    function setRemUnit() {
      var rem = docEl.clientWidth / 120;  // 这里默认是10等份，手动改为120，此时1rem=1920/24px即16px。（设计稿是1920px的）
      docEl.style.fontSize = rem + "px";
    }
  
    setRemUnit();
  
    // reset rem unit on page resize
    window.addEventListener("resize", setRemUnit);
    window.addEventListener("pageshow", function (e) {
      if (e.persisted) {
        setRemUnit();
      }
    });
  
    // detect 0.5px supports
    if (dpr >= 2) {
      var fakeBody = document.createElement("body");
      var testElement = document.createElement("div");
      testElement.style.border = ".5px solid transparent";
      fakeBody.appendChild(testElement);
      docEl.appendChild(fakeBody);
      if (testElement.offsetHeight === 1) {
        docEl.classList.add("hairlines");
      }
      docEl.removeChild(fakeBody);
    }
  })(window, document);

在main.js中引入适配文件

//自适应
import "./utils/flexible";

到vue.config.js中配置插件

const path = require('path')
const resolve = dir => {
  return path.join(__dirname, dir)
}

// // 引入等比适配插件
const px2rem = require("postcss-px2rem");
// 配置基本大小
const postcss = px2rem({
  //配置rem基准值 基准大小 baseSize
  remUnit: 16, // 设计稿尺寸1920/10
});

module.exports = {
  publicPath: './',
  lintOnSave: false,
  css: {
    loaderOptions: {
      postcss: {
        plugins: [postcss]
      },
    },
  },
  chainWebpack: config => {
    config.module
      .rule("css")
      .test(/\.css$/)
      .oneOf("vue")
      .use("px2rem-loader")
      .loader("px2rem-loader")
      .options({
        remUnit: 16,
        remPrecision: 8,
      })
      .end();
    config.resolve.alias
      .set('_c', resolve('src/components')) // key,value自行定义，比如.set('@@', resolve('src/components'))
  },
}