⑥ 使用vw+rem做移动端适配

前言

首先你要知道 vw 和 rem 是什么？怎么使用？

1. 简单来说 vw 是视口单位，相当于把视口等分成了100，1vw = 1;

2. rem是相对单位，设置根元素 html 的 font-size

   • 比如给 html 设置字体大小为10px，1rem = 10px;

正文

1. 我们以 iPhone6为基准，屏幕宽度为375px，然后换算成 vw

   • 注：vw 是视口单位，被均分成了100，1vw = 1，所以根据上面计算，1vw = 3.75px

       375px = 100vw --> 1vw = 3.75px;
   

2. 一般使用 rem 会给 html 的 font-size=10px，因为方便计算，这里需要把10px 换算为 vw

       px -> vw = 100px/3.75px = 2.66vw
   

应用

定义变量

    $rem = 20rem

为什么是20rem？

• 根元素font-size=10px，即元素1rem=10px，所以元素1px=1/10rem

• 设计稿一般宽为750px，是iphone6宽度的两倍，所以元素px = 设计稿px/2

• 综上所述，设计稿px/20rem=实际px

栗子

    $rem: 20rem;
    .main {
        box-sizing: border-box;
        min-height: 100vh;
        padding: 32/$rem;
        background: #58bc58;
    }