px妙转rem

px：像素，相对长度单位，相对于显示器屏幕的分辨率而言（其实我个人认为可以理解为固定单位）；

rem：这是个web前端中的新成员，是CSS3中新增的一个相对单位。相对的只是html根元素；

1、设定两个盒子（举例）

<!-- 指定两个盒子 -->
<div class="box1"></div>
<div class="box2"></div>

2、简单设定样式（px形式）

/* 分别以 px 为单位为两个设置两个简单样式 */
    .box1 {
        width: 50px;
        height: 100px;
        background-color: chartreuse;
    }
    .box2 {
        width: 200px;
        height: 125px;
        background-color: aqua;
    }

3、简单设定样式（px转rem形式）

/* 指定相对根元素的相对值 
       * 一般css样式初始化时候指定
       * 值的指定一般是 50px 或 100px
       * 原因：便于计算
       * 计算公式：px / 相对值 = rem
       */
        html {
            /* 我这里指定 100px */
            font-size: 100px
        }
        .box1 {
            width: .5rem;
            height: 1rem;
            background-color: chartreuse;
        }
        .box2 {
            width: 2rem;
            height: 1.25rem;
            background-color: aqua;
        }

4、两种形式显示基本一样

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_2222