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、两种形式显示基本一样