17. 移动端适配

适配移动端

修改 html 的 font-size, 使用 px-to-rem 插件将所有 px 单位都转换为 rem

html {
  font-size: 26.6667vw;
}

使用媒体查询，处理视口宽度过大的情况

 @media(min-width: 576px) {
    html {
      font-size: 130px !important;
    }
    body {
      background: #0d1117;
    }
    #app {
      max-width: 3.75rem;
      margin: 0 auto;
      background: white;
    }
  }

修改title

在 vue.config.js 中添加配置

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config
      .plugin('html')
      .tap(args => {
        args[0].title = '西西超市'
        return args
      })
  }
}