Responsive Web Design: REM Set Web page font size adaptive

First, the simple science of what is a responsive web page. Responsive Web pages are pages that automatically adjust the layout based on the resolution of the output device. At the same time, the output device resolution changes, can also be automatically adjusted in time. In a word, it is three words: adaptive.

Responsive Web pages not only respond to different types of devices, but also respond to different user needs. The original intention of the response is to make the information better communicated and accessible to all, and this is the original intention of the Web.

When we face the colorful internet world every day, the text not only transmits to us many information, but also in the designer's hand, the text in the page typesetting carries the artistic intuition.

The commonly used text size in a Web page is px (Pixels), EM, which now has a new REM unit in CSS Values and Units Module level 3.

Related article: CSS3 Tutorial: Relative unit REM Detailed

What exactly is REM?

The specification expressly reads:

Equal to the computed value of "on the font-size root element.

"rem" refers to the root element (root element,html) font size, it is very happy, from the remote IE6 to version of the Emperor Chrome they are all about, the root element of the default font-size are 16px. What about the compatibility of such a new unit?

Great, the mainstream versions of Ie9+,firefox, Chrome, Safari, and Opera are all supported, and I can use REM with a lot of audacity.

But why do those guys have to be idle to add such a unit to the pain below? What's the difference between it and em?

We know that the calculation of EM is based on the parent element, which has caused great inconvenience to our calculation in actual use. So the advent of rem freed me from the font-size of the parent element, since it is always based on the root element (HTML).

such as the default HTML font-size=16px, then I want to set the 12px text is: 12÷16=0.75 (REM)

Of course, you can introduce a CSS preprocessing tool (Sass, less, stylus, etc.) to automatically calculate REM values, and here's a few examples.

But what about a lazy person like me or a team developer that hasn't introduced a CSS preprocessing tool? Can you just move a calculator? Don't worry, you can work on it. Let's change the default font-size=10px of HTML is not a good calculation! Like this:

html{font-size:62.5%;/* 10÷16=62.5% */} body{font-size:12px;font-size:1.2rem;/* 12÷10=1.2 */} p{font-size:14px; Font-size:1.4rem;}

It should be noted that in order to be compatible with browsers that do not support REM, we need to write the corresponding PX value in front of REM so that unsupported browsers can degrade gracefully. In fact, not too tangled is the default font-size:100%, or set to font-size:62.5%, if you introduce a CSS preprocessing tool so naturally can use the default value, if for other reasons to use the font-size:62.5% is understandable, can be fully Reset the default font-size you need in the body.

Second, why should we use REM?

The night gave me black eyes, I will use it to find care.

Users in the browser can customize the default text size, if the use of PX, users themselves in the browser settings to change the text size, the page will not change. We can not exclude visually impaired users (such as myopia), elderly users will not do so, as a "humane care" front-end, we could fully consider these circumstances. Since it was introduced in the CSS preprocessing tool, this would hardly add any cost.

Again, the response page is not just responding to different types of devices, but also responding to different user needs.

The settings for each browser are as follows:

1. ie: Press the ALT key to open the menu bar → view → font size

2. Chrome browser: Settings → show advanced settings → web content

3. Firefox Browser: Press the ALT key to open the menu bar → tools → options → content tab

4. Other browsers do not have an example ...

Iii. when to use REM?

Since the availability of REM is better, is it used everywhere? Do not catch the urgency, usually in the title, text and other large areas of text position can use REM. However, in some special design scenarios, REM may cause layout dislocation, such as a button that returns to the top:

So, when to use REM, how to use REM? It also requires you to take out a 18K black eye to illuminate the entire page. Let us together:

Put aside the layout, respond to the text, throw aside stereotypes, and respond to your heart.

In the face of responsive development, what is appropriate, what is inappropriate, you really want to do?

Responsive Web Design: REM Set Web page font size adaptive