Use rem to develop your mobile website and rem Development

Use rem to develop your mobile website and rem Development

What is rem?

1) The unit of measurement element size in css3, such as px, pt, and em.

2) A calculation method of the font-size relative to the root element. 1rem =

3) Use Cases: the width and height of each element, text size, line spacing, padding, and other places where the length unit can be used.

4) Example:

Html {font-size: 37.5px;}/* The base font-size of the root element is set to 37.5px, then 1rem = 37.5px */# box1 {width: 10rem; height: 2rem; font-size: 0.5rem;}/* The box1 width of 10 REM is calculated as 375px in width, 75px in height, and 18.25px in text size. */# box1. title {width: 2rem;}/* The title width is still calculated relative to the root element, and the result is 75px */

 

Adaptation of rem on mobile terminals

As shown in the preceding example, for websites with rem layout, we only need to modify the font-size of the root element, then, the elements of the entire web page can be calculated and adjusted according to the expected proportion.

For example, in the preceding example, if we change the font-size of html to 32px, The box1 style will change to 320px in width and 64px in height, and the text size will change to 16px;

That is to say, during the development process, we only need to use rem for Layout Based on a device with a width. Then, we use JavaScript or css media to change the basic font-size of html based on the width. You can adapt to various mobile devices.

　　

The procedure is as follows:

1) Let's assume we have a PX width design. And prepare for debugging on iPhone 6. The screen width of iPhone 6 is 375px and their ratio is;

Initial process:

Set <meta content = "width = device-width, minimum-scale = 1.0, maximum-scale = 1.0, user-scalable = no" name = "viewport"/>

Set html {font-size: 37.5px}

// Why is it set to 37.5px? You can also set it to another value. However, for ease of conversion and memory, we set its basic font-size = (screen width/10px) for each screen by default );

Development Process: Use rem for the unit set for each element (any place where px, em, pt was originally used), and the number is (actual px/2/37.5 for the elements on the Design Drawing) rem;

...

Now, our page has been developed.

2) at this time, our page, under iPhone 6, is ready. So how can we be compatible with other mobile devices of different widths?

Idea: Change the css attribute of the root element of each device of different widths so that the font-size value is the device width/10px.

Solution 1: Insert a piece of JS in the page header. // Why is the header? -- Prevent page flashing

(function() {    var newRem = function() {        var html = document.documentElement;        html.style.fontSize = html.getBoundingClientRect().width / 10 + 'px';    };    window.addEventListener('resize', newRem, false);    newRem();})();

Solution 2: Add media queries to css files

@media (min-width: 320px){html{font-size: 32px;} }@media (min-width: 360px){html{font-size: 36px;} }@media (min-width: 375px){html{font-size: 37.5px;} }@media (min-width: 384px){html{font-size: 38.5px;} }@media (min-width: 414px){html{font-size: 41.4px;} }@media (min-width: 448px){html{font-size: 44.8px;} }@media (min-width: 480px){html{font-size: 48px;} }@media (min-width: 512px){html{font-size: 51.2px;} }@media (min-width: 544px){html{font-size: 54.4px;} }@media (min-width: 576px){html{font-size: 57.6px;} }@media (min-width: 608px){html{font-size: 60.8px;} }@media (min-width: 640px){html{font-size: 64px;} }@media (min-width: 750px){html{font-size: 75px;} }@media (min-width: 800px){html{font-size: 80px;} }@media (min-width: 1024px){html{font-size: 102.4px;} }

Which solution is better?

Css is applicable to most mainstream screens and is lightweight and does not need to be computed.

Js performs precise calculations based on the specific screen width and can adapt to all devices,

You still need to choose based on your own use cases.

 

What is rem compatibility?

 

Refer:

As you can see, the results are gratifying.

 

Some benefits of rem adaptation:

1) if the viewport is relatively changed, the rem mode is not deformed or blurred.

2) compared with em, rem is not relative to the parent level, so it will not cause confusion.

3) compared with px, you don't need to say much.

4) compared with various media queries, the rem method can be changed with one click, saving countless codes and facilitating maintenance.

 

Some unsuitable scenarios of rem

1) You want to use it on an ipad or pc or super screen device. (The pictures and videos are blurred ).

2) I cannot think of it.

 

To sum up, rem can bring great convenience in the mobile development process. It may also have some shortcomings, but it is far from being covered by its many advantages, it will also be the trend in the future.