使用vw+rem做移动端适配

·  阅读 862
使用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;
    }
复制代码

     

分类:
前端
标签: