Implementation of dynamic REM for mobile terminal layout

Time:2020-1-18

Dynamic rem

1. First, we will introduce the current length unit

pxpixel

emWidth of a m / width of a Chinese character 1em = = its ownfont-size

remFull nameroot emIs the root element (HTML)font-size

vhFull nameviewport height100vh = = viewport height

vwwhole courseviewport width100vw = = viewport width

Because the default font size of web page:16pxSo 1rem defaults to16px chromeDefault is12px

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

2. Layout of mobile terminal

There are generally two types of mobile terminal layout

  • One is overall scaling
  • Second, percentage layout

 Let’s start with overall scaling

Overall zoom, in fact, is to reduce the size of the web page on the PC side to the size of the full view of the web page on the mobile screen

Apple Mobile just came out with this layout. Apple research found that the width of most web pages in the world is 980px, but the width pixel of Apple Mobile is 320px, so the browser of Apple Mobile uses the screen width of 320px to simulate the width of 980px, realizing the overall zoom

In order to see the effect, the<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>

But the overall scaling user experience 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>

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

However, the percentage layout has a disadvantage that width and height cannot be related

You can see the GIF graph above, the width has been longer, but the height has not changed

To achieve this effect, we need to know the width of the screen, and then determine the width and height of the options

We can use VW here, but the compatibility of VW is poor. We can use REM instead of VW

First, REM is based on the font size of HTML, so we can make the font size of HTML = = pagewidth


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

For better use of REM, here 1rem is equal to 1 / 10 of the screen width. Note that 1rem = = 1% of the screen cannot be achieved. Because the browser is the smallestFont size is 12px ;

Change the code as above

<style>
.child{
            background-color:#ccc;
            text-align:center;
            width:4rem;
            height:2rem;
            margin:10px 0.05rem;
            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>

Effect mapping

We can see that the width and height can be changed by percentage, but we will find a very troublesome thing. The designer gave us the design draft, but we have to convert the pixel unit of each element into rem. Here we need SCSS to convert PX

3. Dynamic conversion of PX by SCSS

@function pxToRem($px){
    @Return $PX / $designwidth * 10 + rem; // 10 is to divide the whole screen into 10rem
}
$designwidth: 320; // design width
.child{
    background-color:#ccc;
    text-align:center;
    width:pxToRem(128);//4rem;
    height:pxToRem(64);//2rem;
    margin: 10px pxToRem(1.6);
    float:left;
    line-height:pxToRem(64);
}
.clearfix::after{
    content:"";
    display:block;
    clear:both;

}

The above is the whole content of this article. I hope it will help you in your study, and I hope you can support developepaer more.