移动端适配

1. 为什么要做适配

   1. 机型不一样
   2. 屏幕大小不一样
   3. 屏幕的 dpr 不一样

2. 适配的终极目标

   1. 让一张设计稿的内容在不同的机型上呈现的效果一致
   2. 内容在不同的机型上 ‘等比’

3. 常用适配方案

   1. viewport 适配
   2. rem 适配

4. viewport 适配

   1. 内容:

      meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
      

   2. 目的

      1. 布局视口 = 设备视口

5. rem 适配

   1. 原理:

      1. 根据不同屏幕大小控制根节点 rem 字体大小
      2. 页面中的内容大小设置用 rem 从而达到适配的目的

   2. 实现：
      第三方库，参考下方

vue 脚手架中使用第三方库适配

vue2 脚手架

1. 安装依赖

   1. npm install px2rem-loader lib-flexible --save

2. 配置说明

   1. 在项目入口文件 main.js 里 引入 lib-flexible， flexible 会自动根据设备情况动态设置 rem 的值的大小

      import 'lib-flexible/flexible'
      

   2. 在 build 文件夹下的 util.js 中添加

      //  新增内容开始
      // 全局定义px2remLoader
      const px2remLoader = {
          loader: 'px2rem-loader',
          options: {
          remUnit: 37.5  // UI设计图的10等分大小
          }
      }
      // 新增内容结束
      
      // 在该函数的loaders中添加
       function generateLoaders (loader, loaderOptions) {
           // 添加使用 px2remLoader
      // 修改代码开始
           
           const loaders = options.usePostCSS ? [cssLoader, postcssLoader,px2remLoader] : [cssLoader, px2remLoader]
      // 修改结束
      
          if (loader) {
          loaders.push({
          loader: loader + '-loader',
          options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
          })
          })
          }
      
          // Extract CSS when that option is specified
          // (which is the case during production build)
          if (options.extract) {
          return ExtractTextPlugin.extract({
          use: loaders,
          fallback: 'vue-style-loader'
       })
          } else {
          return ['vue-style-loader'].concat(loaders)
          }
      }
      

vue3 脚手架配置

1. 安装依赖

   1. npm install postcss-px2rem lib-flexible --save

2. 配置说明

   1. 在项目入口文件 main.js 里 引入 lib-flexible， flexible 会自动根据设备情况动态设置 rem 的值的大小

     import 'lib-flexible/flexible'
   

   2. 在 vue.config.js 中添加配置

      const px2rem = require('postcss-px2rem')
      // 配置postcs-px2rem
      const postcss = px2rem({
        remUnit: 37.5   //UI设计图的10等分大小
      })
      css: { // 添加postcss配置
          loaderOptions: {
            postcss: {
              plugins: [
                postcss
              ]
            }
          }
      }