Web front end lesson 69 – viewport and REM units

Time:2021-7-26

1. Viewport

Viewport is short for view window.

The size of the viewport is the actual size of the HTML element.

However, if you want to display the actual page size on the mobile terminal, you must adapt the viewport,

Otherwise, when the mobile end loads a page, the default viewport width 980px or a certain value (layout viewport width) cannot render the actual size.

explain:

On the desktop display, 1px in CSS is equivalent to 1 Physical pixel, but on the mobile screen, due to the large difference in device resolution,

The resolution (pixel density) of screens of the same size may differ by one or more times. At this time, 1px in CSS corresponds to physical pixels

The number will vary according to different devices, so the mobile browser must adapt to the viewport in order to get the ideal layout effect.

Get layout viewport   Viewport width:

      document.documentElement.clientWidth

2. Viewport adaptation

UseThe label controls the viewport to adapt to get the ideal viewport width   viewport)。

  Element can provide metadata information about HTML elements, such as page description, search keywords, access frequency, etc.

  Element attributes:

Content, set or returnThe value of the content attribute of the element;

Name, the name of connecting the content attribute to a metadata;

Httpequiv, connect the content attribute to an HTTP header;

Scheme, which sets or returns the format used to interpret the content attribute value.

With the help ofWhen setting the viewport for the tag, name = “viewport”, not meta   The attribute value of content includes the following 6 values:

Width to set the layout viewport   The width of the viewport), which is a positive integer or   Device width

Initial scale: set the initial scaling value of the page between “0.0-10.0”

Minimum scale, set the minimum scale. The value is between “0.0-10.0”, which must be less than or equal to   maximum-scale

Maximum scale, set the maximum scale. The value is between “0.0-10.0”, which must be greater than or equal to   minimum-scale

Height, sets the height of the layout viewport, and the value is a positive integer or   Device height, which generally does not need to be defined separately

User scalable, set whether to allow users to scale. The value is yes / no, and the default is “yes”

Syntax example:

    

be careful:

Either “width – device” or “initial – device” can be set separately   ideal   viewport,

However, when only “width = device width” is set, on iPhone or iPad, regardless of horizontal or vertical screen, ideal   viewport

It is the width of the vertical screen, and only when “initial scale = 1” is set, it is in the window   On the IE browser of phone, idealviewport

It is always the width of the vertical screen. When both are set at the same time, the browser will take the larger one.

3. REM units

rem(font   size   of   the   root   Element) is a size unit calculated proportionally to the font size of the root element.

In the responsive layout, considering the size difference of different mobile terminals, in order to ensure that the space occupied by all elements is the same on different devices,

If the page layout needs to be dynamically adjusted, REM dynamically converts the physical pixels and logical pixels of the device to achieve the purpose of layout adaptation.

When the font size of the root element is defined according to the REM idea, the syntax is as follows:

    document.documentElement.style.fontSize

    =(document.documentElement.clientWidth/750)*100+”px”;

explain:

(1) the above setting means that the device width is divided equally by 750 and multiplied by 100 to obtain the pixel size of the root element font.

Therefore, on devices of different sizes, the size of the root element font is different, but the proportion to the device size is the same.

(2) since most PS design drafts are designed according to the iPhone 6 standard, the logical pixel of the iPhone 6 is 375 Px, while

Its actual physical pixels are twice the full screen width, that is, 750px. The resolution of PS design software is the same as that of physical pixels

The ratio is 1:1, so in order to facilitate the scaling conversion between different equipment, the equipment width is divided equally by 750.

(3) in order to avoid using REM unit to set the element size smaller than the default minimum size of the browser, such as 12px, 14px, etc,

Therefore, divide the equipment width by 750, multiply it by an amplification factor, and use “100” to facilitate calculation.

Code example:

viewport&rem
    

    
            document.documentElement.style.fontSize=(document.documentElement.clientWidth/750)*100+'px';
    
    
        div{
            width: 6rem;height: 0.3rem;background-color: #1e7e34;
        }
    


    
    
        var div=document.querySelector('div');
        console.log(document.documentElement.clientWidth);
        console.log(document.documentElement.style.fontSize);
        console.log(div.clientWidth);
        console.log(div.clientHeight);

4. Response form case

viewport&rem
    

    
        //Calculate the "fontsize" value after the page is loaded.
        window.onload=function(){
            document.documentElement.style.fontSize=(document.documentElement.clientWidth/750)*100+'px';
        }
        //To ensure that the fontsize value is automatically calculated when the viewport size changes, use the window.onresize event.
        window.onresize=function () {
            document.documentElement.style.fontSize=(document.documentElement.clientWidth/750)*100+'px';
        }
    
    
        table{
            width: 6rem;height: 1rem;font-size: 0.08rem;
            border-collapse: collapse;  /*  Set cell border collapse, that is, the borders of adjacent cells will be merged into a single border*/
        }
    


    
        

            
                Curriculum of week 10
            
        
        
            Monday
            Tuesday
            Wednesday
            Thursday
            Friday
            Saturday
            Sunday
        
        
            chinese
            mathematics
            English
            Politics
            history
            Sports
            Fine Arts
        
        
            literature
            finance
            In the field
            Finance and Economics
            Biology
            music
            dance

Knowledge fragment:

The window.onresize event is triggered when the viewport size changes

The border collapse property sets whether the borders of adjacent cells are merged

The cellspacing property sets the distance between cells

The letter spacing property sets the distance between characters

Word spacing property to set the distance between fonts

Test results:

  

Recommended Today

VBS obtains the operating system and its version number

VBS obtains the operating system and its version number ? 1 2 3 4 5 6 7 8 9 10 11 12 ‘************************************** ‘*by r05e ‘* operating system and its version number ‘************************************** strComputer = “.” Set objWMIService = GetObject(“winmgmts:” _  & “{impersonationLevel=impersonate}!\\” & strComputer & “\root\cimv2”) Set colOperatingSystems = objWMIService.ExecQuery _  (“Select * from […]