使用vw+rem做移动端适配

前言

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

1. 简单来说 vw 是视口单位，相当于把视口等分成了100，1vw = 1;
2. rem是相对单位，设置根元素 html 的 font-size
   • 比如给 html 设置字体大小为100px，1rem = 100px;

正文

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

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

       375px = 100vw --> 1vw = 3.75px;
   复制代码

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

       px -> vw = 100px/3.75px = 26.6666vw
   复制代码

应用

定义变量

    $rem = 200rem
复制代码

为什么是200rem？

• 根元素font-size=100px，即元素1rem=100px，所以元素1px=1/100rem
• 设计稿一般宽为750px，是iphone6宽度的两倍，所以元素px = 设计稿px/2
• 综上所述，设计稿px/200rem=实际px

栗子

    $rem: 200rem;
    .main {
        box-sizing: border-box;
        min-height: 100vh;
        padding: 32/$rem;
        background: #58bc58;
    }
复制代码