3 minutes to read the mobile-end REM Use method

1. Why use REM

Blog for a long time did not write, the reason is very simple.

Recently took over a project, to do at the same time PC and mobile end of the page, has not been contacted before, but after all, the money is the big ye, so still bite the bullet.

The most troublesome thing is what to move the end.

different resolution fit.

Specifically, some screen 320px wide, some screen 640px wide, and some more wide, if you write fixed px, then either small, or large blank.

What to do.

If the element is fixed to occupy the screen space (generally refers to the width rather than the height, the same below) xx is OK.

For example, 10% of the 320px is 32px,640px 10% is 64px,

If 10 10%-width elements are put together, it must be 100%, that is, the full screen (width), will not exceed, will not leave white.

Simple understanding:

rem refers to the X of the screen width;

Or, n rem = user viewable area 100% width

Note that the height is not spoken because the contents of the y-axis (height) direction can be viewed by scrolling the screen after the width (x axis) is full

Example above:

1, designers to a 640px width of the design diagram,

2, you assume 64rem=100% width (here is 640px), then 1rem=10px;

3, you according to write a static page, and then according to the proportion of 1rem=10px, the size of the elements on the design diagram, all with rem write down;

4, perfect, you write static page on the 640px width of the page on the normal display;

5, a user is the 320px width of the mobile phone, because you assume 64rem=100% width, so at this time 1rem=5px (320/64=5), so also perfect show; 2, rem how to use. REM is a CSS unit; the size of the 1rem is told by the CSS property under HTML font-size; Use the location where the PX is replaced

Suppose you preset the 1rem = 10px in the design draft;

Then the width of an element (class= "Ele") is 20px, height 30px (design draft),

So you can write the CSS;

HTML {
    font-size:10px;
}

. ele {
    width:2rem;
    Height 3rem;
}

3, at any resolution is applicable

Find out where the problem is. How to confirm 1rem equals how many px.

The reason is rem is the use of CSS in the unit, CSS is not to help you calculate how many px 1rem, can only be calculated by yourself.

The calculation method is simple:

1, you have a design draft a (assuming 640px), there is a preset rem and PX ratio B (if it is 1rem = 10px)

2. Get the width of the viewable area of the user's browser C (if it is 320px), then his 1rem size D can be b/a = d/c this formula to know

3, the reason is that you assume that the screen can accommodate how many rem, this is a fixed ratio (such as this is 64rem)

1 REM = b/a * C;
The surrogate can get
1 rem = 10px/640px * 320px = 5px;

4. Other

1, the user after loading, you have to set a good 1rem size bar (remember is set under the HTML element of the font-size);

2, if the size of the user's screen will change, you must consider it (refresh 1);

3, you don't bother to find the corresponding code, I have to give you it (as follows);

var fun = function (Doc, win) {
    var docel = doc.documentelement,
        resizeevt = ' orientationchange ' in window? ' Orientationchange ': ' Resize ',
        recalc = function () {
            var clientwidth = docel.clientwidth;
            if (!clientwidth) return;

            Here is the assumption in the case of 640px width design, 1rem = 20px;
            //Can be modified according to the actual need
            docEl.style.fontSize = * (clientwidth/640) + ' px ';
    if (!doc.addeventlistener) return;
    Win.addeventlistener (Resizeevt, Recalc, false);
    Doc.addeventlistener (' domcontentloaded ', Recalc, false);
}
Fun (document, window);

Direct execution can