Vue -项目创建（rem适配项的设置）

左手的ㄟ右手 2023-02-20 03:09 8阅读 0赞

## 3. 项目rem 配置 ##

\#\#\#\#3.1 rem介绍

> 小米、京东、携程 m.mi.com/m.jd.com/m.ctrp.com

*  核心原理

1rem = 当前 html 的fontSize
     也就是说 : rem是相当于根元素的字体大小
     
     // 使用
     div { 
       width:2rem;
       height:2rem
     }
    
     // 媒体查询
     @media (min-width:320px) { 
       html { 
         font-size : 20px
       }
     }
     @media (min-width:640px) { 
       html { 
         font-size : 40px
       }
     }

*  作用 :

保证适配所有的屏幕, 而且几乎完全的还原了设计图,  体验好

*  rem的痛点

1. 使用rem开发没有px开发爽
    2. 需要做不同屏幕的适配 (需要给每个屏幕都设置一个html的fontSize 媒体查询)
    3. 开发的时候, 设计图量出来的都是px, 还需要转化为rem单位 (依赖 px2rem)
    
    解决办法 : 基于webpack配置rem环境, 变得自动化

#### 3.2. rem的配置 (webpack环境下的配置) ####

1.  **安装包 :**

npm i lib-flexible
    
    lib-flexible这个包是阿里开源的一个库, 自动给不同屏幕设置html的fontSize

1.  **引入 lib-flexible**

// main.js 自动适配所有屏幕
    import 'lib-flexible'

*  打开浏览器就可以看到 html 上的 `font-size`

他会给每个屏幕都设置一个html的大小, 会把屏幕的宽度大小/10 = 1rem

*  `lib-flexible`会自动帮我们设置视口, 所以需要把原来的额视口删除, `index.html`的`viewport`

320 * data-dpr = 640 /10 => 64

*  给一个div设置样式

.one { 
      width:200px;
      height:200px;
    }
    // 发现切换没有反应, 因为没有设置为 rem单位

1.  安装第二个库 : 这个包会自动把我们项目中的px转化为rem单位

npm i postcss-px2rem

1.  `vue.config.js`里面做配置

module.exports = { 
      devServer: { 
        open: true,
      },
      // 配置 px 转 rem 的
      css: { 
        loaderOptions: { 
          css: { },
          postcss: { 
            plugins: [
              require('postcss-px2rem')({ 
                // rem 的单位 填设计稿的 1/10
                remUnit: 75,
              }),
            ],
          },
        },
      },
    }
    
    //这个值改怎么填
    屏幕标准 : 375
    设计稿 750   => 量的尺寸 200px  => 实际上100px
    设计稿 640   => 量的尺寸 200px  => 实际上117px
    设计稿 375   => 量的尺寸 200px  => 实际上200px