怎么做适配

1.媒体查询 + rem（通过媒体查询更改html根字体大小，实现字体大小随屏幕尺寸变化）
@media screen and (max-width:320px){
html{
font-size:12px;
}
}
@media screen and (min-width:321px) and (max-width:375px){
html{
font-size:14px;
}
}
@media screen and (min-width:376px){
html{
font-size:16px;
}
}

2.vw + vh + rem(响应式布局vw+vh+rem屏幕适配方案)
1先设置根元素为100px=1rem
2然后算100vw=所少px
3.然后算出100px=多少vw
如果设计图为 640px html设置{font-size:31.25vw}
如果设计图为 750px html设置{font-size:26.67vw}

3 （https://blog.csdn.net/weixin_42350305/article/details/117955220）
document.documentElement.style.fontSize=(document.documentElement.clientWidth/750)*100+'px';
监听窗口改变设置rem
window.addEventlistener('resize',fn);

4 插件 (https://blog.csdn.net/weixin_43932309/article/details/125102930 和 https://www.bilibili.com/video/BV1Zm4y1j75e/spm_id_from=333.337.searchcard.all.click&vd_source=d5a2dcad2c91b804d2d7052801c7c3d0)

移动端rem适配布局：Vue+amfe-flexible+postcss-pxtorem

1. npm install amfe-flexible --save
   npm install postcss-pxtorem --save
2. main.js中导入amfe-flexible； import 'amfe-flexible'
3. vue.config.js文件配置（vue-cli3）
   const pxtorem = require('postcss-pxtorem')
   module.exports = {
   css: {
   extract: { ignoreOrder: true },
   loaderOptions:{
   postcss: {
   plugins: [
   pxtorem({
   rootValue: 37.5, // UI图宽的十分之一
   propList: ['*']
   })
   ]
   }
   }
   }
   };
   参考文献： https://blog.csdn.net/qq_48294048/article/details/127248331
   https://blog.csdn.net/weixin_43294560/article/details/103997290