Dynamic rem

1. Let’s start with the current units of length

Px pixel

Em The width of a M/the width of a Chinese character 1em == its own font size

Rem root em is the font size of the root element (HTML)

Vh full name viewport height 100vh == height of the viewport

Vw Full viewport width 100vw == viewport width

Since the default font size for web pages is 16px, 1rem is 16px by default and chrome’s minimum font pixel is 12px by default

An element inherits the font size of its parent element without setting font size

2. Mobile layout

There are generally two mobile layouts

  • One is overall scaling
  • The second is the percentage layout

Let’s start with global scaling

Overall zooming is actually the process of reducing the size of the web page on the PC to the size of the full web page on the mobile screen

Apple’s research found that most web pages in the world are 980px wide, while the iPhone’s width is 320px, so the iPhone’s browser uses a screen width of 320 pixels to simulate the width of 980px, achieving overall zooming

In order to see the effect, you have to put<meta name="viewport">Delete this part

 <style>
        div{
            width:980px;
            margin:0 auto;
            background:#f0f0f0;
        }
        ul{
            list-style:none;
        }
        li{
            float:left;
            margin-left:10px;    
        }
        clearfix::after{
            content:"";
            display:block;
            clear:both;
        }
    </style>
</head>
<body>
    <div>
        <ul>
            <li>Option 1</li>
            <li>Option 2</li>
            <li>Option 3</li>
            <li>Option 4</li>
            <li>Option 5</li>
            <li>Option 6</li>
        </ul>
    </div>
</body>
Copy the code

But the user experience of this whole scaling is not good, so pass, let’s talk about the percentage layout

Percentage layout

// Percentage layout<style>
        .child{
            background-color:#ccc;
            text-align:center;
            width:40%;
            margin:10px 5%;
            float:left;
        }
        .clearfix::after{
            content:"";
            display:block;
            clear:both;
        }
    </style>
</head>
<body>
    <div class="parent clearfix">
        <div class="child">Option 1</div>
        <div class="child">Option 2</div>
        <div class="child">Option 3</div>
        <div class="child">Option 4</div>
    </div>
</body>
Copy the code

You can see that the percentage layout automatically ADAPTS to the screen width.

But the downside of the percentage layout is that you can’t correlate width and height

If you look at the GIF above, the width keeps getting longer while the height doesn’t change

In order for the box to be half the width, we need to know the width of the screen to determine the width and height of the options

Vw can be used here, but vw is not compatible, so we can use REM instead of VW

Rem is based on HTML font size, so we can set HTML font size==pageWidth

<script>
	let pageWidth = window.innerWidth;
    document.write('<style>html{font-size:'+ pageWidth/10 +'px}</style>')
</script>
Copy the code

For better use of REM, here 1rem is equal to 1/10 of the screen width. Note that you can’t do 1rem== 1 percent of the screen. Because the browser’s minimum font size is 12px;

Change the code as above

<style>
.child{
            background-color:#ccc;
            text-align:center;
            width:4rem;
            height:2rem;
            margin:10px 0.05 rem;
            float:left;
            line-height:2rem;
        }
        .clearfix::after{
            content:"";
            display:block;
            clear:both;

        }
</style>
</head>
<body>
    <div class="parent clearfix">
        <div class="child">Option 1</div>
        <div class="child">Option 2</div>
        <div class="child">Option 3</div>
        <div class="child">Option 4</div>
    </div>
</body>
Copy the code

Results in the figure

You can see that the width and height can vary by percentage, but one of the things that we find really annoying is that when the designer gives us a design, we have to convert the pixels of each element into REM. Here we are going to use SCSS to convert PX

3. SCSS dynamic conversion of PX

@function pxToRem($px){ @return $px/$designWidth*10+rem; } $designWidth:320; Child {background-color:# CCC; text-align:center; width:pxToRem(128); //4rem; height:pxToRem(64); //2rem; Margin: 10 px pxToRem (1.6); float:left; line-height:pxToRem(64); } .clearfix::after{ content:""; display:block; clear:both; }Copy the code

conclusion

Because my level is limited, if there are mistakes and omissions, please see more corrections

This article was written by Hu Zhiwu on 2019/5/20. If you want to reprint it, please indicate the source.

If you think it’s good, please give it a thumbs up