preface

So the first thing you need to know is what are VW and REM? How to use it?

  1. In simple termsvwIs the viewport unit, equal to the viewport divided into 100,1 vw = 1;
  2. remIs relative units, setFont size of the root HTML element
    • For example, set HTML font size to 100px, 1rem = 100px;

The body of the

  1. We took the iPhone6 as a baseline, with a screen width of 375px, and converted it to vw

    • Note: vw is the viewport unit, evenly divided into 100,1 vw = 1, so according to the above calculation,1 vw = 3.75 px
        375px = 100vw --> 1vw = 3.75px;
Copy the code

  2. Rem usually gives HTML font size=100px, because it is easy to calculate, 100px needs to be converted to VW

        px -> vw = 100px/3.75px = 26.6666vw
Copy the code

application

Define variables

    $rem = 200rem
Copy the code
Why 200rem?
  • The root elementfont-size=100pxElements, i.e.,1rem=100px, so the element1px=1/100rem
  • It’s 750px wide, which is twice the width of the iphone6, soElement px = design px/2
  • To sum up,Design px/200rem= actual PX

chestnuts

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