Page adaptive and rem

Often used when writing the front page rem, also read on the Internet for others to introduce rem, detailed the situation is not described here, just talk about my views and usage of the rem.

In my opinion, rem is a relative scale, relative to the root element of font-size settings, such as:

html {
    font-size: 16px;
}

So, when using the rem 1rem elsewhere will be equal to 16px.
Which can be considered the application of the most basic rem, but this use and direct use px is no difference, but the unit is not the same, the need for conversion.
Since rem is a relative scale, the most commonly used adaptive page, we can not simply brutal directly sets the font size to determine the size of the root element of 1rem.
Know all the week, android phone screen sizes, have various sizes, such a situation to our front-end development has brought a lot of trouble, we can not for every mobile phone size to write one set of code to to adapt. Designers can not do a design mark for each handset size.
FIG designer is assumed to do 750px width. How can we adapt to all of the phone screen in set design and it set the code go? This is very useful when rem.
Others do not know is how the company used in our company for the rem to do a conversion formula.

根字号 = x * ( pageWith / 750 );

Here are a few values ​​need to explain:

• x This is a free value, is on how much you want px design 1rem to represent, can freely set
• pageWith page actual size px
• This design is the width 750 of FIG.
• Root size is the result of the calculation of this formula, px 1rem value is what you will use represents.

There is also a place to explain what is px on the design? For example, the design width of 750px, you want 1rem = 100px width that the entire design can be written as 7.5rem, but this is only for 100px in design, because in fact the phone's size is uncertain.

Ah ~ ~ ~ getting more and more chaotic, or to explain the formula for it:

The formula means that the true width of the screen is divided into the number of copies of the design, multiplied by how much you want to Px on the design 1rem to represent, end up with a value, this value as the size of the root element, your page can full use of REM, fully completed according to the size on the interface design to achieve adaptation of the different mobile phone screen.

I do not know there is no clear expression of what I mean. Or the bar code,

var remUnit = 0;
function setRemUnit () {
    var doc = document.documentElement;
    var width = doc.clientWidth;
    remUnit = 100 * (width / 750);
    doc.style.fontSize = remUnit + 'px';
}

window.addEventListener('resize', setRemUnit);
setRemUnit();

This code is a design width 750px means with reference to a desired 1rem = 100px premise, a value is calculated, provided to the root element.
When using this can be used:
for example, there is a div width of 300px on the design, there is a picture in the div width 120px, picture on the right is a user name, the word number 32, we can write:

.avatar-block {
    width: 3rem;
    ....
    .avatar {
        width: 1.2rem;
        height: 1.2rem;
        border-radius: 50%;
        ...
    }
    .username {
        font-size: 0.32rem;
        ...
    }
}

Because the screen is not fixed, so in different screen, obtained by calculating the root element size also varies along with the screen size changes, so can we design a set of code will be able to adapt to all screens.
Finish