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

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环境下的配置)

安装包 :

npm i lib-flexible

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

引入 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单位

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

npm i postcss-px2rem

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

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

3. 项目rem 配置

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

猜你喜欢