vue自适应pc端界面（ lib-flexible ）

原创已于 2023-06-27 17:52:50 修改 · 2.4k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2023-06-19 09:49:55 首次发布

文章讲述了如何在项目中进行移动端适配的配置，包括安装lib-flexible和postcss-px2rem依赖，然后在main.js中引入lib-flexible，在vue.config.js中配置postcss-px2rem，最后调整flexible.js的refreshRem函数以适应不同屏幕宽度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、安装依赖

npm install lib-flexible --save-dev
npm i postcss-px2rem --save

2、在main.js中引入

import 'lib-flexible'

3、在vue.config.js中配置

css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require("postcss-px2rem")({
            remUnit: 136.6  
          })
        ]
      }
   }
}

4.修改flexible.js配置

文件路径：node_moudles/lib-flexible/flexible.js

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