rem combines with the native function of css3 to complete all kinds of screen adaptation of mobile terminal

It is believed that the first web page size that many people touch is px, which represents the size of a pixel

The designer's design draft we received is also based on px

But the screen size of the mobile phone is different. The display effect on the iPhone 8 is very good. It may be completely out of shape on the iPhone 5S. In order to have a good display effect on the screens of different sizes, we need to zoom the web page

Rem is a very interesting unit. The size of 1rem is equal to the size of font size of html, that is, if

  font-size: 100px;

So, 1 rem is 100 px

  • We can dynamically change the size of font size under html through the width of the screen, so as to realize the zooming of the web page

  • calc is a function of css3, which can realize simple addition, subtraction, multiplication and division (it can be used to replace some functions of sass)

  • The combination of rem and calc can be realized with very simple code and the adaptation of various screens

The effect is as shown in the figure

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <title>How to use rem</title>

        // Get device pixel ratio (DPR - > devicepixel ratio)
        var dpr = window.devicePixelRatio;
        // Dynamically set device zoom ratio
        var metaTag=document.createElement('meta'); = "viewport"
        metaTag.setAttribute('content', 'initial-scale=' + 1/dpr + ', maximum-scale=' + 1/dpr + ', minimum-scale=' + 1/dpr + ', user-scalable=no');

        // Dynamically set the font size of html (page width is 1rem)
        document.addEventListener('DOMContentLoaded', function(e) {
            document.getElementsByTagName('html')[0].style.fontSize = window.innerWidth + 'px';
        }, false);


            text-align: center;
            margin: 0;
            padding: 0;
            line-height: 0;

            width: 100%;

            width: calc(196rem / 375);
            margin: calc(100rem / 375) 0 0 0;
            margin: calc(30rem / 375) 0 0 0;
            font-size: calc(30rem / 375);
            line-height: calc(30rem / 375);
            color: #64B587;

            <tr><td><img src="girl.png" class="icon"></img></td></tr>
            <tr><td><p class="name">Yara Barros</p></td></tr>



rem is a dynamically defined unit. In combination with the calc function of css3, we can write a set of code and easily adapt to various sizes of screens. In addition, when writing the calc function, we must leave spaces before and after the operators~

Keywords: css3 Mobile sass

Added by phpmaverick on Sun, 01 Dec 2019 03:31:27 +0200