需要移动自适应PC自适应（一定屏幕范围内）实现原理使用amfe-flexible和postcss-px2rem依赖包，编译工程后，它会自动将px转为rem，并根据屏幕大小动态改变html的font-size值。想了解rem的自适应原理可以自行google，这里就不说原理了。不懂原理的同学没关系，跟着下面的步骤就可以了。教程第一步是安装组件和依赖npminstallamfe-flexible-Snpminstallpostcss-px2rem-S第二步是引入lib-flexible.js。下面是vue项目的例子，在入口文件main.js中导入"amfe"-flexible/index.js";第三步，在目录public/index.html文件中添加如下一行代码第四步，配置postcss-px2rem如果是一个vue-cli3搭建的项目，然后在根目录下找到vue.config.js文件，（如果没有找到，新建一个即可）配置内容如下css:{loaderOptions:{css:{},postcss:{plugins:[require("postcss-px2rem")({remUnit:75})]}}}把上面的代码放到module.exports={}里面，大括号里面的完整代码如下：module.exports={//基本路径publicPath:'./',css:{loaderOptions:{css:{},postcss:{plugins:[require("postcss-px2rem")({remUnit:75})]}}},//代理devServer:{port:8080,//host:'localhost',https:false,//https:{type:Boolean}open:true,//配置自动启动浏览器disableHostCheck:true,"proxy":{"/*":{"target":"http://xxx","changeOrigin":true}}},}上面的remUnit:75，这里设置的是75，也就是说设计是750px，如果你的设计是640px，那么你可以改成64，如果你的设计是1920px，那么你改成192.如果你的项目是vue-cli2搭建的，安装依赖postcss-pxtoremnpmi-Dpostcss-pxtorem。找到根目录下的.postcssrc.js文件，在里面添加如下代码：module.exports={plugins:{'postcss-import':{},'postcss-url':{},autoprefixer:{browsers:['Android>=4.0','iOS>=7']},'postcss-pxtorem':{rootValue:75,propList:['*','!border*']}}}propList表示匹配属性（意思是匹配所有属性）可以用在里面！如果不想px转rem，可以在style后面写/no/comment。导航{宽度：400px;高度：300px；背景：红色；边框：1px纯黑色；/*no*/}经过上面的配置，打开你项目的编译页面，打开调试页面，改变宽度，你会看到html的font-size值实时变化，css的px值你写的自动转换为rem。上面的自适应解决方案是完全自适应的。如果你想控制适配范围，比如你做PC项目，你想在130在0px-1800px之间做自适应，小于1300px设置一个固定的htmlfont-size值，大于1800px设置一个固定的htmlfont-size值，这样pc项目布局的页面就会不总是收缩和适配关键原理是通过媒体查询来控制，代码如下，在你的公共样式（或全局样式）文件中写入/*当屏幕大于1800px时，写入font-size值html到200px*/@mediascreenand(min-width:1800px){html{font-size:200px!important;/*no*/}}/*当屏幕小于1300px时，deadhtml的font-size值为130px*/@mediascreenand(max-width:1300px){html{font-size:130px!重要的;/*no*/}}以上只是一个例子，你在移动端不需要设置，但是在PC端，你想要什么范围，根据你的项目页面来调整。vite打包项目配置新建一个postcss.config.js文件，安装依赖postcss-pxtoremnpm，代码如下i-Dpostcss-pxtoremmodule.exports={plugins:{autoprefixer:{overrideBrowserslist:['Android>=4.0','iOS>=7']},'postcss-pxtorem':{rootValue:192,propList:['*','!border*']}}}rootdirectorycreate.browserslistrcfilelast2versions>1%iOS7last3iOSversions记得先写前三步！！！踩坑解决当你用webpack打包的时候，如果你在style里写/*no*/，就是不想把px转为rem有时候，比如上面提到的代码/*当screen大于1800px，写死html的font-size值为200px*/@mediascreenand(min-width:1800px){html{font-size:200px!important;/*no*/}}这个px不会转为rem，因为它依赖注释，但是生产环境打包的时候，注释会被去掉。这样会导致你写/*no*/不转换这个css属性，是没有效果的。如果您删除包中的评论，它会自动为您转换。解决方法1.是把style写到index.html文件的style标签里，这样package就不会删除index.html的css注释了。如果你的webpack也删除了index.html的注释，那么你是不能通过webpack注释删除index.html的，这个自行google搜索了很多不打包压缩的index.html文件，我的项目是不会删除的index.html的注释解决方案2.通过配置sass-loader，打包时不会删除所有css注释。参考文章：postcssinwebpack-px2rem生产环境注解失效参考文章在前端使用amfe-flexible和postcss-pxtorem配置postcss和postcss-plugin-px2rem
