rem适配布局-1

1.em

em相对于父元素 的字体来说的

2.rem

rem是一个相对单位，类似于em，不同的是rem的基准是相对于html元素的字体

<style>
        html {
            font-size: 14px;
        }
        div {
            font-size: 12px;
            width: 15rem;
            height: 15rem;
            background-color: purple;
        }
        p {
            /* 1.em相对于父元素 的字体来说的 */
            /* width: 10em;
            height: 10em; */
            /* 2.rem是一个相对单位，类似于em，不同的是rem的基准是相对于html元素的字体 */
            width: 10rem;
            height: 10rem;
            background-color: pink;
        }
    </style>