自适应是每个开发者必走的路。本文是前者踩过的一些坑的几条路。希望这些经验能在开发过程中对大家有所帮助！！！1.传统布局=>rem方法一constdeviceWidth=document.documentElement.clientWidth||文档.body.clientWidth；document.querySelector('html').style.fontSize=deviceWidth/7.5+'px';方法二文档。documentElement.style.fontSize=document.documentElement.clientWidth/7.5+"px";window.addEventListener("resize",function(){document.documentElement.style.fontSize=document.documentElement.clientWidth/7.5+"px";},false);//方法一和方法二效果一样2.我只想看一个单位，就是=>px方案一：lib-flexible+postcss-pxtorem不足：1.两个插件需要配合使用,而且rootValue设置的值不太好理解2.字体单元的布局不是很合适。安装步骤：lib-flexible已经停止维护，可以使用amfe-flexible代替1.首先我们安装这两个包npminstallnpminstallamfe-flexible--savenpminstallpostcss-pxtorem--save-devyarninstallyarnaddamfe-flexibleyarnaddpostcss-pxtorem--dev2.在main.js中引入lib-flexibleimport'amfe-flexible'3.在.postcss.js中配置postcss-pxtoremcli2-----pl的配置文件ugins下添加postcss-pxtorem配置module.exports={"plugins":{"postcss-pxtorem":{rootValue:192,//根据设计图大小写，如果设计图是1920，写192propList:['_'],//需要转换的属性selectorBlackList:[]//不进行px转换的选择器}}}vue-cli3配置方法：在postcss.config.js文件中添加module.exports={根路径"plugins":{"postcss-pxtorem":{rootValue:192,//根据设计图的大小写，如果设计图是1920，写192propList:['_'],//需要转换的属性selectorBlackList:[]//Selectorwithoutpxconversion}}}方案二：viewport==>postcss-px-to-viewport插件在vue项目中引入Try1.我们把它安装到项目开发环境先：npmipostcss-px-to-viewport-D2.在项目根目录下添加.postcssrc.js文件//添加如下配置：module.exports={plugins:{autoprefixer:{},//用于不同的浏览器浏览器自动添加相应的前缀，比如-webkit-,-moz-等"postcss-px-to-viewport":{unitToConvert:"px",//转换后的单位viewportWidth:750,//UI设计稿的宽度unitPrecision:6,//转换后的精度，即小数位数propList:["*"],//指定转换后的css属性单位，*表示转换所有css属性单位viewportUnit:"vw",//指定要转换成的窗口单位，默认vw要转换为字体的窗口单位，默认vwselectorBlackList:[“wrap”],//指定不转换为窗口单位的类名,minPixelValue:1,//默认值为1，小于等于1px则不进行转换mediaQuery:true,//是否转换媒体查询的css代码中，默认为falsereplace:true,//转换后是否直接替换属性值exclude:[/node_modules/],//设置为忽略文件，使用正则表达式匹配目录名landscape:false//是否处理横屏情况}}};3.重新运行项目使配置文件生效//我们写一段测试代码来验证一下：测试转换4.打开控制台，可以看到转换后的配置需要注意：propList:Whenwedo有些属性不想转换单位，可以在数组后面加上，并带！前面的符号，如propList:["","!letter-spacing"]*，意思是：转换所有css属性的单位，除了letter-spacingselectorBlackList:转换后的黑名单。我们可以在黑名单中写入字符串。只要类名中包含这个字符串，就不会被匹配到。比如selectorBlackList:['wrap']，表示wrap，my-wrap、wrapper等类名的单位不会转换。关于第三方UI库的兼容性，当然我们在引入一些第三方库的时候，比如vant，去掉上面配置的exclude，表示所有内容都会转为vw。遇到这样的问题：变的很小，被压扁了。其实vant团队是按照375px的设计稿做的，理想的视口宽度是375px。解决方案：让我们回到webpack本身，再看一下这个.postcssrc.js文件。除了暴露一个对象，它还可以暴露一个函数。无论暴露什么，都会被我们在webpack运行时配置的海量文件读取。获取并重写.postcssrc.js文件配置，如下所示：module.exports=({file})=>{constdesignWidth=file.dirname.includes('node_modules/vant')?375：750；返回{插件：{autoprefixer：{}，“postcss-px-to-viewport”：{unitToConvert：“px”，viewportWidth：designWidth，unitPrecision：6，propList：[“*”]，viewportUnit：“vw",fontViewportUnit:"vw",selectorBlackList:[],minPixelValue:1,mediaQuery:true,exclude:[],landscape:false}}}}重新运行后发现不仅是vant的单位-相关组件已经转换为vw，而且比例也完全正确，希望对您有所帮助，祝您开发之旅愉快！！！
