谈谈对rem的理解和运用

一、先来说一下什么是rem

rem是一个相对单位，是所有子元素相对于html元素的单位，之所以用它来写移动端，就是因为所有元素的单位大小都可以随着html元素去等比例缩放的

1.下边来看个例子

// 跟字号大小
    html{
        font-size:16px
    }
    p{
        font-size:1rem;
    }

这个例子其实就是想表达，rem是随着html的跟字号大小去改变的，此时html跟字号大小是16,那么1rem = 16px,如果再将html跟字号变为37.5，那么此时的1rem = 37.5

2.下边是自己总结的一段话希望可以加快理解

rem是一个相对单位，rem是根据根元素字体大小动态变化的，适配方案就是利用页面宽度改变rem单位大小
这样只按照设计稿设置尺寸，其他页宽就跟着等比例改变。
页宽改变=>根元素字体大小改变=>rem改变=>按rem设置的元素大小改变

3.那如果设计师给你的设计稿又会怎么去理解

如果设计师给你设计稿宽375,就相当于当页面宽与设计稿一致时,1rem = 375px;
当页面宽为460时，1rem = 460px;
这样的话就可以用你设计稿的元素大小去除以460，得到的就是相对的单位像素，从而达到效果

二、vue项目中怎么使用rem

1.首先还是一样index.html加视口标签

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover">

2.npm i amfe-flexible（里边有封装好的动态获取跟字号，根据页面大小，自动改变跟字号）

"amfe-flexible": "^2.2.1",

3.npm i postcss-pxtorem(将px单位自动转化为rem)

"postcss-pxtorem": "^5.1.1",

4.新建postcss.config.js文件（文件名不能变，目的是为了覆盖webpack底层文件）

module.exports = {
    plugins: {
        // 'autoprefixer': {
        //     browsers: ['Android >= 4.0', 'iOS >= 8']
        // },
        /* 设置样式时 px 自动转换为 rem */
        'postcss-pxtorem': {
            rootValue: 37.5, // 这里根据跟字号大小去写
            propList: ['*']
        }
    }
}