应用场景页面需要兼容PC端和移动端。我之前的方案是用mediaquery判断当前设备大小，然后写两三套css代码来兼容，可以达到目的，效果也不错，但是感觉还是有点麻烦。后来学习了flexable.js脚本，稍微修改一下，基本可以满足我的需求。postcss-px2remyarn添加postcss-px2rempostcss-px2rem插件可以将px转rem，需要在vue.config.js中配置该插件（如果没有项目，手动创建一个）//css相关配置css:{//启用CSS模块modules:false,//是否使用css分离插件extract:true,//启用CSSsourcemaps？sourceMap:false,//csspresetter配置项loaderOptions:{css:{},postcss:{plugins:[//remUnit这个配置项的值是多少？？？通常我们根据设计图来设置这个值，原因很简单，也便于开发。//如果设计图给的宽度是750，我们一般会把remUnit设置成75，这样我们写样式的时候就可以直接按照设计图上标注的宽高1:1还原开发了。require('postcss-px2rem')({remUnit:75})]}},}flexible.jsflexible会根据屏幕自动给页面添加标签，动态控制initial-scale,maximum-scale的值,minimum-scale等属性===>设备缩放比例所以，在我们的htmlheader中，之前配置的viewport的meta标签是不需要的。这种标签flexble会自动为我们添加。下面附上修改后的flexble脚本代码：(functionflexible(window,document){vardocEl=document.documentElementvardpr=window.devicePixelRatio||1varisMobileDevice=/(iPhone|iPad|iOS|Android)/i.test(navigator.userAgent);dpr=isMobileDevice?dpr:1;//调整主体字体大小函数setBodyFontSize(){if(document.body){document.body.style.fontSize=(12*dpr)+'px'}else{document.addEventListener('DOMContentLoaded',setBodyFontSize)}}setBodyFontSize();//set1rem=viewWidth/10functionsetRemUnit(){letwidth=docEl.clientWidth//下面5行是自己加的，pc端页面不转remletremUnitConfig=75letviewWidthMax=remUnitConfig*10if(width/dpr>viewWidthMax){width=viewWidthMax*dpr}varrem=width/10docEl.style.fontSize=rem+'px'}setRemUnit()//重置页面上的rem单位resizewindow.addEventListener('resize',setRemUnit)window.addEventListener('pageshow',function(e){if(e.persisted){setRemUnit()}})//检测0.5px是否支持if(dpr>=2){varfakeBody=document.createElement('body')vartestElement=document.createElement('div')testElement.style.border='.5pxsolidtransparent'fakeBody.appendChild(testElement)docEl.appendChild(fakeBody)if(testElement.offsetHeight===1){docEl.classList.add('hairlines')}docEl.removeChild(fakeBody)}}(window,document))最后需要在index.html中引入脚本：flexble.js和index.与html文件同级，最后在head中添加js标签并导入：自此项目配置完毕
