vw+pxtorem+媒体查询实现移动端适配

首先来说一下思路：

首先项目中使用的单位都是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'
  ],

这一步配置结束后就完成了移动端的适配，接下来就可以通过媒体查询对不同屏幕大小实现响应式布局