首先来说一下思路：
首先项目中使用的单位都是px，手动将px转换为rem肯定不现实，这时候就用pxtorem插件将项目中使用的px转换为rem，转换为rem后，由于rem是根据font-size变化而变化的，要想实现移动端适配，就需要在屏幕大小是移动端大小时根据屏幕大小动态修改font-size从而影响rem修改px大小，这里根据屏幕大小动态修改font-size我使用的是vw，上面配置好后就实现了移动端的适配，接下来再通过媒体查询修改布局来实现响应式
引用一段对 vw、vh、vm 的描述
- vw是视口宽度的单位，视口宽度是100vw
- vh是视口高度的单位，视口高度是100vh
- vm取vw和vh较小的一个除以100作为单位
直接将根元素的 font-size 设置为 10vw，即可实现相同效果
详细步骤：
1、下载pxtorem
npm install pxtorem
2、在nuxt.config.js中引入
//webpack配置
build: {
postcss: {
plugins: {
'postcss-pxtorem': {
//这个 rootValue 参数就是 1rem = 多少 px ，设置为 54 就是 1rem=54px
//这里的54px（font-size）是中间值，是让元素本身的px大小除以54后转换为rem，然后在使用时又乘以后面设置的54转换为真实的大小，移动端改变font-size后对应的元素大小也会改变
rootValue: 54,
//这个参数忽略哪些css属性不被影响（即不修改px->rem）
propList: ['*', '!border', '!border-bottom', '!border-top'],
//忽略适配css文件（后面会提到，是适配文件，里面的px不要转换为rem）
exclude: function (file) {
return file.indexOf('flexible.css') !== -1; }
}
}
}
},
配置完pxtorem后项目的px就会自动转换为rem了，可以浏览器f12查看
3、配置css适配文件
/* 移动端适配 CSS ./assets/css/flexible.css */
html {
font-size: 10vw !important;
}
/* 屏幕大小大于540px时不进行适配，font-size固定*/
/* 小于540px时通过10vw进行大小适配，也就是540/10=54px,刚好无缝衔接 */
@media (min-width: 540px) {
html {
/* 这里设置为54px和pxtorem的一致 */
font-size: 54px !important;
}
}
/* 解决适配后div块布局错乱问题 */
div {
font-size: initial;
*font-size: 100%;
}
在nuxt.config.js中引入
//引入css文件
css: [
'@/assets/css/flexible.css'
],
这一步配置结束后就完成了移动端的适配，接下来就可以通过媒体查询对不同屏幕大小实现响应式布局
扫描二维码关注公众号，回复：
17460431 查看本文章
