手把手教学PC端rem适配方案vue

适配的方案： 1.flex布局。 2.rem适配。 3.vw/vh布局(PC端实测不好用) 前期开发移动端用的是vw，vh 感觉真香。到开发pc端的时候，缩放字体最小12px的限制简直不要太坑！！！

现在开发rem适配是真的快，VSCODE有插件可以一键从px转rem。 下面开始从0-1开始rem适配： 1.从应用市场搜索px to rem

2.安装后，按F1，选择CSSRem，确认后自动会将px转换为rem

3.在APP.VUE中加入如下代码调整根节点的单位： resizeWeb(); window.addEventListener('resize',(e)=>{   resizeWeb() }) function resizeWeb(){       var wH = window.innerHeight; // 当前窗口的高度         var wW = window.innerWidth; // 当前窗口的宽度         var whdef = 16 / 1920; // 表示1920的设计图,使用16PX的默认值         var rem = wW * whdef; // 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值       //  console.log('窗口宽度',wW,'窗口高度',wH)         if(wW>920){           var html = document.documentElement;           html.style.fontSize =  rem + "px"; //适用于PC网站         };     };

大功告成！！！！

4.这里只适配了宽度，高度没有适配，进一步优化，对方案进行宽高比例适配 function resizeWeb(){       var wH = window.innerHeight; // 当前窗口的高度         var wW = window.innerWidth; // 当前窗口的宽度         const pageWidth = wW/wH > 1920/1080 ? wH*1920/1080 : wW         const pageHeight = pageWidth * 1080/1920         var whdef = 16 / 1920; // 表示1920的设计图,使用16PX的默认值         var rem = wW * whdef; // 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值       //  console.log('窗口宽度',wW,'窗口高度',wH)         if(wW>920){           var html = document.documentElement;           html.style.fontSize =  pageWidth/100 + "px"; //适用于PC网站         };     };