移动端适配

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
              ]
            }
          }
      }