Talking about the usage of Mobile rem

What is rem?

"font size of the root element This is the definition of w3c

That is, the unit of font size relative to the root node (html node).

Most popular browsers support rem, and the default font unit is 16px.

Image taken from http://caniuse.mojijs.com/Home/Html/item/key/rem/index.html

Two simple applications.

Since we are sure that it can be eaten in all major browsers, we can rest assured that we will boldly develop on the mobile side.

Let me give you an example.

-size:62.5%; --size:1

Since the default font of our selected browser is 16px, set the root node html to font-size:62.5%;, so that if 1rem = 10px is converted, it will be convenient to calculate in units.

Three responsive uses.

In the actual development process, both mobile and pc devices must be compatible with various resolutions, so the actual size is responsive.

Let's say that 62.5% of the previous example is based on the iPhone 5 size, which is 320*568 size

If it is iPad size, as long as the corresponding magnification can be

@media only screen and (min-width: 768px){ html { font-size: 150%! important; }}

Note: Using media query, you can set different size according to your actual needs.

Advanced use of four rem

Ht tps://g ihub. com/am fe/lib-flexible

Speaking of mobile terminal adaptation, how can Taobao's mobile terminal be missing ~

This tutorial is detailed enough (if absolutely not enough, check out h ttp s://gi thu b.com/am fe/article/issues/17, which also has a demo ready).

After introducing flexible.js, about how to convert px to rem:

In sublime is a direct conversion plug-in, interested children can go to study.

The current size can also be calculated quickly under sass/less precompilation.