Responsive Web design: REM Setting Web page font size adaptive

Article Introduction: responsive Web pages not only respond to different types of devices, but also respond to different user needs. The original purpose of the response is to let information communicate better, so that all people have access to information without hindrance, and this is the original purpose of the WEB.

First of all, simple science what is a responsive web page. A responsive Web page is a page that automatically adjusts the layout according to the resolution of the output device. At the same time, when the output device resolution changes, it can be automatically adjusted in time. In a word, that's three words: adaptive.

Responsive Web pages not only respond to different types of devices, but also respond to different user needs. The original purpose of the response is to let information communicate better, so that all people have access to information without hindrance, and this is the original purpose of the WEB.

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

The common text size in the Web page is px (Pixels), EM, and now the REM unit is added in CSS Values and Units Module level 3.

Related articles: CSS3 tutorial: Relative unit REM Detailed

One, what is REM?

The specification clearly reads:

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

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

Great, the mainstream version of Ie9+,firefox, Chrome, Safari, Opera is supported, I can use REM.

But why do the guys at the consortium have to sit around and add such a unit to the pain below? What difference does it have with 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 rem appeared to save me from the arithmetic, and I don't have to worry about the font-size of the parent element because it's always based on the root element (HTML).

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

Of course, you can introduce the CSS preprocessing tool (Sass, less, stylus, etc.) automatically calculate REM value, here is not one of the examples.

But what about a lazy person like me or a team developer who hasn't introduced a CSS preprocessing tool? Can you just move a calculator and snap it? Don't worry, you can make some modifications. Let's change the HTML default font-size=10px 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 gracefully degrade. In fact, not too tangled is the default font-size:100%, or set to font-size:62.5%, if you introduce the CSS preprocessing tool so naturally can use the default value, if for other reasons to use the font-size:62.5% is understandable, can completely Resets the default font-size you need in the body.

second, why should REM be used?

Dark 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, the user's own browser settings to change the size of the text, the page will not change. We can not exclude visually impaired users (such as myopia), elderly users do not do so, as a "humanistic care" of the front-end, we could fully consider these situations. By introducing the CSS preprocessing tool, this will hardly add any cost.

It also confirms that the Response Web page is not just a response to different types of devices, but a response to different user needs.

The settings for each browser are as follows:

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

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

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

4. Other browsers don't give examples ...

when is REM used?

Since REM is a better usability, is it going to be used everywhere? Do not catch the urgency, usually in the title, text and other large areas of text location can use REM. But in some special design scenarios, REM may cause layout mismatches, such as a back-top button:

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

Throw away the layout, respond to the words, leave out the prejudice and respond to the heart.

In the face of response development, what is appropriate, what is not appropriate, you really want to do?