WEB页面实现等比例缩放自适应

rem 和 vw 结合实现WEB页面等比例缩放自适应

1. 选择基准窗口宽度
以宽度 1920px 作为基准窗口宽度；
以 50px 最为 html 元素的 font-size，即rem单位的基本长度。

   // px 转换成 rem
   @function px2rem ($size) {
     @return ($size / 50)
   }
   
   html {
       font-size: 50px;
   }
   h1 { 
       font-size: 2rem;  /* 2 × 50px = 100px */
   } 
   p {
       font-size: 1.2rem;   /* 1.2 × 50px = 60px */
   }
   div {
       width: 10rem;  /* 10 × 50px = 500px*/
   } 

2. 将 html 元素的 font-size 替换为使用 vw 表示
窗口宽度：1920px

   => 1vw  = 19.2px
   => 50px = ( 50 / 19.2 )vw = 2.6vw
   
   html {
       font-size: 2.6vw;
   }
   h1 { 
       font-size: 2rem;  /* 2 x 2.6vw x 19.2 = 99.84px */
   } 
   p {
       font-size: 1.2rem;   /* 1.2 × 2.6vw x 19.2px = 59.9px */
   }
   div {
       width: 10rem;  /* 10 x 2.6vw × 19.2px = 449.2px*/
   } 

3. 若窗口大小发生改变
窗口宽度：1000px

   => 1vw  = 10px
   => 2.6vw  = 26px
   
   html {
       font-size: 2.6vw;
   }
   h1 { 
       font-size: 2rem;  /* 2 x 2.6vw x 10px = 32px */
   } 
   p {
       font-size: 1.2rem;   /* 1.2 × 2.6vw x 10px = 31.2px */
   }
   div {
       width: 10rem;  /* 10 x 2.6vw × 10px = 260px*/
   }