How to use rem or viewport for mobile adaptation?

 When developing a mobile interface, mobile adaptation has always been a headache. Common mobile adaptations include viewport adaptation, rem adaptation, percentage adaptation, etc. Here we only introduce viewport adaptation and rem adaptation. adaptation. After reading this article, I believe that you should be able to actually operate the mobile terminal for the adaptation of different mobile phone sizes.

One: rem adaptation

 rem refers to the unit of font size (font-size) relative to the root element, font-size=1rem of the root tag. It can be called a relative unit, which means that we can dynamically update the value of the font-size of the root element through the size of the viewport, so as to dynamically update the relative value of rem, so that the mobile web page can adapt to various model mobile phone. Without further ado, let's start with the code.
 
js code (used to dynamically modify the value of font-size of its root tag):

<script type="text/javascript">        
        //rem adaptation
        //rem adaptation principle: Changes the number of css pixels occupied by an element on different devices
        /*rem Advantages and disadvantages of adaptation
            Pros: doesn't break the perfect viewport
            Disadvantage: The conversion of px value to rem is too complicated*/
            
        (function(){
            var styleNode = document.createElement("style");
            /* When not divided by 16, 1em occupies the viewport width,
            Then we set the width and height of the elements in the page to be less than 1rem, and the browser's calculation is not particularly accurate and prone to deviations. */
            // var w = document.documentElement.clientWidth;
            /* So at this time, we divide by 16, so that 16rem occupies the full screen, and the rem of most elements in the page will exceed 1rem */
            var w = document.documentElement.clientWidth/16;//Get viewport size
            /* Set the fontsize of the root element at this time, and add the font-size attribute to the style of html*/
            styleNode.innerHTML = "html{font-size:"+w+"px!important}";
            //Add style tag to head tag with html{font-size:w;}
            document.head.appendChild(styleNode);
        })()
    </script>

html and css code:

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #test{
                width: 2rem;
                height: 2rem;
                background: pink;
                text-align: center;
                line-height: 2rem;
            }
        </style>
    </head>
    <body>
        <div id="test">test</div>
    </body>

  Let's take a look at what changes to the elements of the page by changing the model of the phone (size of the viewport).
            
            
 From the above two figures, we can see that when we change the model of the mobile phone (remember to refresh after the change is completed), the size of the viewport has also changed, and the width and height of the test element has also changed. At this time, we It can be adapted to the mobile terminal.

rem adaptation principle

  Changed the number of css pixels an element occupies on different devices

Advantages and disadvantages of rem adaptation

  • Pros: doesn't break the perfect viewport
  • Disadvantage: px value conversion to rem is too complicated (below we use less to solve this problem)

less+rem solves complex conversion problems

 Using less to perform operations reduces the rem value we need for manual calculations. You can also use css preprocessors such as stylus and scss to perform operations on rem. This example needs to be matched with the above js code.
  At this point our less code is:

/* At this time, our 750 is the size of the design drawing, and the specific value should be set according to the size of the design drawing. */
/* The logic for 750/16rem is: because 16rem occupies the total width of the page, 750 (the width of the design drawing)/16rem gives the ratio of 1rem to the design drawing */
/* If this is suitable, we can design the size according to the width of the element in the design drawing. For example, the width and height of test is 200px, then we can write it like this: */
    @rem:750/16rem;
    #test{
              width: 200/@rem;
              height: 200/@rem;
              background: pink;
              text-align: center;
              line-height: 200/@rem;
          }

  Notice! It needs to be used in combination with the above js code!
 

Two: viewport adaptation

 For viewport adaptation, the actual size of the viewport is changed, that is to say, it can be regarded as the principle of near-large and far-small. When the viewport width is reduced, the visual size of the current element will also decrease. When the viewport is increased The current element's visible size will increase after the width. So as to carry out the adaptation of the mobile terminal. Without further ado, continue with the code:
js code:

(function(){
             /* targetW The value is the width of the design image, and the width is set to 640 at this time. */
            var targetW = 640;
            /* Get the viewport zoom ratio */
            var scale = document.documentElement.clientWidth/targetW;
            /* Get the meta tag */
            var meta =    document.querySelector("meta[name='viewport']");
            /* add a scale to it */
            meta.content="initial-scale="+scale+",minimum-scale="+scale+",maximum-scale="+scale+",user-scalable=no";
    })()

html and css code:

    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width"/>
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            /* Set its width to half the design image size (design image size is 640px) and its height to 100px */
            #test{
                width: 320px;
                height: 100px;
                background: pink;
                text-align: center;
                font-size: 32px;
                line-height: 100px;
            }
        </style>
    </head>
    <body>
        <div id="test">test</div>
    </body>

           
           
 It can be seen that the size of the element has not changed at this time (because we are changing the size of the viewport and not the size of the element), but it will still occupy half of the viewport (depending on the zoom ratio to change the size of the element in the current interface) the size of). This is the use of viewport for mobile adaptation.

The principle of viewport adaptation

  In the viewport adaptation scheme, each element occupies the same number of css pixels on different devices. But the ratio of css pixels and physical pixels is not the same, the same ratio */

Advantages and disadvantages of viewport adaptation

  • The size measured on our design drawing is the pixel size we can set, that is, what is measured is what is set
  • Disadvantages destroy the perfect viewport

#3: Ending
 The above is a summary of rem adaptation and viewport adaptation, but it is still recommended that you use less+rem for mobile adaptation. If it helps, please like it, and you are welcome to make corrections in the comment area.

Tags: Front-end less rem

Posted by schme16 on Wed, 25 May 2022 04:28:32 +0300