Disclaimer that

This article is shallow, do not like spray

Rem is what?

Rem is the unit of the font for the root element, such as HTML {font-size:16px; }, one rem equals 16px.

You can use it not only for fonts, but for other px units, such as the padding:2rem, which equals 32px.

Guidelines for responsive layout

Requirements for responsive layout (from Zhihu Z Yuhan) :

1. Content blocks are scalable: Content blocks can be automatically adjusted to a certain extent to ensure that they fill the entire page

2. Content block can be freely arranged: when the page size changes greatly, the number of columns arranged can be reduced/increased

3. Margin adaptation: The margin of the block should change as the page size changes more

4. Picture adaptation: for the common width adjustment, the picture remains beautiful and usable when both sides are hidden

5. Content can be automatically hidden/partially displayed: if a large section of description text is displayed on the computer, it can only be shown in a small amount or completely hidden on the mobile phone

6. Navigation and menus collapse automatically: expand or close depending on the page size

7. Fonts remain zoomed when scaled

What’s REM good for

Instead of the px unit, use REM as the unit, which allows for equal scaling on devices of different sizes by changing the font size of the root node

Assuming the device width is 600px and the page has only two divs on one line, use the rem width set as follows

html{
    font-size:10px;
}
#div1{
    width:20rem;
    float:left;
}
#div2{
    width:40rem;
    float:left;
}
Copy the code

Now switch to a device with a width of 400px and keep the proportions the same, just change the font size

// Calculate the font size in js, x is the reduction scale
400/600=x/10
x=6.6
Copy the code
html{
    font-size:6.6 px.;/* Actually use js to change dynamically, you can also configure media query */
}
/* The following remains the same */
#div1{
    width:20rem;
    float:left;
}
#div2{
    width:40rem;
    float:left;
}
Copy the code

Why not use percentages? Isn’t it easy

Percentages are computed relative to the parent element, which is inconvenient to use, and REM has a font change.

How to use

1. Set the font size for the root element and correct it in the body element

html{font-size:100px; } body{font-size:14px; }Copy the code

After the above Settings, use REM instead of PX and divide by 100

.menu li{
	display: table-cell;
	padding: 1.rem 3.rem;/* equivalent to 10px 30px*/
}
Copy the code

2. Bind listener events and change font size after DOM loading and when size changes

Pay attention to the code1536Change to the actual width of the page at the time of development

/ / change the font size
(function(doc,win){
    var docEI = doc.documentElement,
    resizeEvt = 'orientationchange' in window?'orientataionchange':'resize',
    recalc = function(){
        var clientWidth = docEI.clientWidth;
        if(! clientWidth)return;
        //100 is the font size and 1536 is the width of the browser window at development time
        docEI.style.fontSize = 100*(clientWidth/1536) +'px';
    }

    if(! doc.addEventListener)return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false); }) (document.window);
Copy the code

Automatic conversion to REM

See postcss, to be followed…

A & Q

  • Font-size :62.5%?

    Because some versions of Google don’t support 10px fonts

  • Why not use EM?

    As with percentages, it is inconvenient to calculate relative to the parent element

  • Why not use viewPort isometric scaling?

    Viewport:

    <meta name=" viewport "content=" width=320, maximum-scale=1.3, user-scalable=no ">

    This is done by scaling the screen in equal proportions, which can cause distortion when the screen is scaled too large

  • Is rem Web responsive?

    No, REM is just proportional scaling, which solves only part of the problem with the criteria for responsive layout, and also with media queries