3-minute reading of mobile REM usage

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 page, did not contact before, but after all, give money is uncle, so still bite the bullet.

What's the most troubling thing about the mobile side?

Different resolutions to match!

Specifically, some screen 320px wide, some screen 640px wide, some wider, if you write fixed px, then either the small put down, or big there are large gaps.

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) The xx is OK.

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

If 10 elements of the 10%-width are put together, it must be 100%, which is packed with the screen (width) and will not exceed or remain white.

Simple to understand:

rem refers to the X-percent of the width of the screen;

Or, n rem = user viewable area 100% width

Note that the height is not said, because the width (x-axis) is full, the y-axis (height) direction of the content can be viewed by scrolling the screen

above example:

1, the designer to a 640px width of the design drawings,

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

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

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

5, a user is using 320px width of the mobile phone, because you assume 64rem=100% width, so at this time 1rem=5px (320/64=5), so also perfect display;

2. How does REM work?

1. REM is a CSS unit;
2. 1rem is the size of the HTML under the Font-size this CSS property to tell the browser;
3. Use the location where the PX is replaced

Assuming that you're preset to the design draft, 1rem = 10px;

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

Then your CSS will be able to write like this;

html{    font-size: 10px;}.ele{    width: 2rem;    height 3rem;}

3. Applicable at any resolution

Did you find out where the problem is? How to confirm 1rem equals how many px?

The reason is that REM is the unit used in CSS, and CSS does not help you calculate how many px 1rem is, only by yourself.

The calculation method is simple and simple:

1. You have a design draft a (assuming 640px), with a preset rem and PX ratio b (if 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 based on b/a = d/c this formula to know

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

1remBAC;//代入可得1rem106403205px;

4. Other

1, the user after loading, you have to set the size of 1rem (remember is set in the HTML element under the Font-size);

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

3, you do not bother to find the corresponding code, I have to give you it (below);

varFun = function (DOC, Win) {    varDocel = doc.documentelement, resizeevt =' Orientationchange ' inchWindow?' Orientationchange ':' Resize ', Recalc = function () {            varClientWidth = Docel.clientwidth;if(!clientwidth)return;//Here is the assumption that in the case of 640px width design, 1rem = 20px;            //Can be modified according to actual needsDocEl.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

3-minute reading of mobile REM usage