vue视频比例（vue 如何让PC端不同屏幕大小分辨率自适应（屏幕自适应）（postcss-px2rem、px2rem-loader、lib-flexible））

vue 如何让PC端不同屏幕大小分辨率自适应

前提：因为项目需求是在已有的项目里面增加自适应  
    
    
    ，不影响其他页面的已有的布局

     


     


     


，以下方法仅供参考    
    
    
。

1  
    
    
    、安装postcss-px2rem 

     


     


     


、px2rem-loader 




 




 




、lib-flexible

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

2  

   

   

   、在根目录src中新建util目录下新建flexible.js等比适配文件

找到node_modules里的lib-flexible包,拷贝一份放在utils里面取名为flexible.js 




 




 




，修改lib-flexible的源码,(更改refreshRem函数)修改为下面的代码就可以了  

   

   

   ，当然if判断是根据自己需求的调整   


     


     


    。

目的：因为lib-flexible的源码是针对移动端的设计方案

     

     

     

，我们要实现PC的自适应所以屏幕尺寸也要更换



 




 




 


。 function refreshRem() { var width = docEl.getBoundingClientRect().width; // if (width / dpr > 540) { // width = 540 * dpr; // } if (width / dpr < 810) { width = 810 * dpr; } if (width / dpr < 1300) { width = 1300 * dpr; } if (width / dpr < 1920) { width = 1920 * dpr; } if (width / dpr < 2560) { width = 2560 * dpr; } var rem = width / 10; docEl.style.fontSize = rem + "px"; flexible.rem = win.rem = rem; }

3

     

     

     

、在 main.js中引入我们刚修改过的flexible.js文件(因为我们更改了源码   




  




  




，所有我们需要引入我们改过的文件)

import "@/utils/flexible";

4  




  




  




、在vue.config.js中配置插件

// // 引入等比适配插件 const px2rem = require("postcss-px2rem"); // 配置基本大小 const postcss = px2rem({ //配置rem基准值 基准大小 baseSize remUnit: 192, // 设计稿尺寸1920/10 }); module.exports = { chainWebpack: (config) => { config.module .rule("css") .test(/\.css$/) .oneOf("vue") .use("px2rem-loader") .loader("px2rem-loader") .options({ remUnit: 192, remPrecision: 8, }) .end(); }, css: { loaderOptions: { postcss: { plugins: [postcss] }, }, }, }

注意

：

1  


  


  


  、改完配置记得重新编译项目

2
     
     
     
、如果个别地方不想转化px   

   

   

。可以简单的使用大写的PX或 Px    

     

     

   。