Use of units in CSS: choose px or REM

This article introduces you to the article about the use of the unit in CSS: Choose px or REM, there is a good reference value, hope to help the needy friends.

cssA lot of units,,,, and % px em rem relatively new, and vw vh so on. Each unit has a specific purpose, such as when it is necessary to set a width-to-height ratio for a rectangle, and with the 16:9 screen width adaptive, % other units are difficult to do. So there is no such thing as saying that a unit is wrong and that a unit is the best.

The article said the page adaptation, refers to the same layout, on different sizes of the screen how to zoom, control spacing, width, height, font size and so on.

There are many ways to fit the page:

• Use px , combined with media query for ladder-style adaptation;

• Use % , by percent adaptive layout;

• Use rem , html the combination of elements font-size to adapt to the screen width;

• Use vw , vh and directly according to the width of the viewport Gao Shi matching.

In these cases, minor details need to be fine-tuned. For example, px when used, it may be in a small screen, to a container, the transform: scale(.8) appropriate reduction of processing. When using, it is necessary to fix the left and right spacing of the rem page 10px .

So for me, although the online has been on px , rem and em other units of the pros and cons of a lot of arguments, but my point of view may be, the specific situation of specific analysis. Some students may want to blow up, you do not say what is the difference?

Yes, I mean, just like the opening, it doesn't make sense to say a single unit is good or bad. What we are most concerned about is: what is the most appropriate unit to use?

Also do not suspense, I directly listed some of their own feel better practice, these are based on their years of development experience and a lot of research to get the conclusion:

1. Used in visual manuscripts that require fixed-size elements px . For example 1px , 4px a line, a rounded border.

2. Used on the font size, (most) spacing rem .

3. Use with caution em .

Why didn't I mention % it in vw the title vh ? These are proportional to each other, except that the reference objects are not the same.

%is the reference parent container, vw and vh is the reference viewport. Their use of the scene is very fixed, such as the above mentioned 16:9 container, in addition % to the use, there is a more appropriate way? In addition, 1vw = 1%的视口宽度 . So you really need to press the size of the viewport to use this unit, the use of a relatively fixed scene.

I'll explain the origins of these 3 conclusions in more detail next.

Why use it with caution em ?

The em calculation is superimposed. It's too easy to make a mistake under this mechanism, because you don't know css exactly how much the specified font size is.

html<span>    ABC    <span>def</span>    abc</span>//cssspan {font-size:1.5em;}

The actual effect is this:

Let's figure out em the principle of calculation, which is proportional to the font size of the current element .

spanthe outer font size is 16px (the browser default), so 1.5em then it is 24px . Because the font size is inherited, resulting in span the inner layer of the font size is inherited 24px , and then after 1.5em it became 36px .

So, if you want to use it em , try not to use the Inheritance attribute ( font-size ) unless you really know what you're doing!

For example, if you want to automatically adjust the character spacing based on the font size, you can do this:

. content {    Font-size:1rem;    Letter-spacing:. 03em;}

But think again, letter-spacing by .content the size of the decision, and it is determined by html the font size. Then why letter-spacing not just use rem it?

rem vs. px

pxis I prefer a unit, simple and direct. But reason is driven, still need to consider the use scene rationally.

pxThe nature of the property determines that it can only be used for fixed dimensions. In other words, if the visual designer specifies that the border width must be 2px . There is no need to discuss it in this case.

In addition to the fixed size px , most of the other things can be used rem .

Now consider a real development scenario, which is generally preceded by a visual manuscript to develop. Two cases: First, if the visual manuscript is a copy of the iphone 6 and iphone 6+ and other sizes, then you can adapt it to media query. Second, the designer only give you a model of the visual manuscript, the iphone 6, for example, 750x1334 twice times the screen after the conversion is 375x667 .

The first case is not discussed, but you are dealing with the second situation after the media query breakpoint is applied.

The second meaning is that you want to extend the width of the 375px script to fit any width of the screen. (the page height is related to the business, do not care, the width is definitely fixed)

Next get the visual manuscript as follows:

The main parameters after measurement are as follows:

• Page Spacing 10px

• Text spacing 10px, font size 16px

• A height 100px

• b height 50px, upper pitch 30px

You'll soon be able to write HTML constructs and CSS.

<p class= "box box-1" >a. The first paragraph </p><p class= "box box-2" >b. Content of the second paragraph </p>

body {    padding:10px;    Background: #f6f0ee;}. box {    padding:10px;    font-size:16px;    Color: #fff;    Box-sizing:border-box;}. box-1 {    height:100px;    Background: #1daedc;}. box-2 {    margin-top:30px;    height:50px;    Background: #ddbe97;}

Perfect to meet the requirements.

Then the vision began to ask, large screen to enlarge the font, the spacing.

One option at this time is to ask the designer what kind of screen to fit, what the font size is, and what the spacing is. The technology is again fine-tuned via media query.

@media (min-width:414px) {    //Do not write here, according to the visual requirements can be quantified}

Another option can be done in turn. First, REM is used as the unit of font size, container height, and outer spacing. Then the code can be changed to:

HTML {    font-size:16px;}. box {    Font-size:1rem;}. box-1 {    height:6.25rem;}. box-2 {    margin-top:1.875rem;    Height:3.125rem;}

The other style rules are the same, and the current results are equivalent to the previous one. If you add a bit more magic, changing the font size of the iphone 6+ with media query html will automatically change the attributes of the other elements.

@media (min-width:414px) {    html {        font-size:17.664px;    }}

17.664 = 414 * 16 / 375。

htmlThe calculation formula can be obtained from this font-size : fontSize = deviceWidth * 16 / 375 ;

The premise is html that you have this meta attribute:

<meta name= "viewport" content= "Width=device-width, initial-scale=1.0, maximum-scale=1.0, User-scalable=0, User-scalable=no ">

As to why 16px , this is a later introduction. So rem there is a clear advantage that it can solve most problems with a small amount of code .

If there are some details that are not satisfactory, then use media query to fine-tune. This kind of subjective "good-looking", "bad look", may be doomed to not automatically solve it.

about REM compatibility . Desktop-side words are only IE9+ supported. vwand the vh same. So if you want to consider IE8 the compatibility, then there is no other choice can only use px it. As for the mobile side, support is good and can be used in the production environment.

How to set the Font-size of HTML

Because (most) the default font size of the browser is 16px , so generally the html font-size normalization 16px is a more appropriate way to practice. This article can also be consulted.

For everyone's convenience, I've listed some popular media query breakpoints (based on iphone 6).

@media only screen and (min-width:320px) {    html {        font-size:13.65px;    }} @media only screen and (min-width:360px) {    html {        font-size:15.36px;    }} @media only screen and (min-width:375px) {    html {        font-size:16px;    }} @media only screen and (min-width:390px) {    html {        font-size:16.64px;    }} @media only screen and (min-width:414px) {    html {        font-size:17.664px;    }} @media screen and (min-width:640px) {    html {        font-size:27.31px;    }}

You may also see some articles that suggest setting the html font size 62.5% .

HTML {    font-size:62.5%;}

Because the browser's default font size is just mentioned 16px , it is converted to a percentage 62.5% = 1 / 16 .

Then why do you use percentages? Because the accessibility and browser settings are taken into account. For some users, may be in the phone or browser settings to increase the size of the phone, which means that the other party usually look at the word is very laborious, so he should zoom in. The size of the HTML set to a percentage is very sweet, will change the size of the page with the phone settings.

Setting the default font size on your phone is a very common phenomenon, so if it is a humanitarian typesetting, I think the percentage is very noble. It not only from the visual angle to consider the United States, more to achieve the "user first" the four words.

Okay, back to the real world. Only those countries that are more demanding on accessibility in the overseas world will actually implement these. But domestic words, frankly speaking, more attention to the appearance of the United States. No internet company page has ever been compatible with screen Reader, and rarely does keyboard Shortcut.

Pull away, even if you see 62.5% the situation, some of the spacing is not reasonable, do not very good, especially the copy to do the picture, the font size is not sensitive. If the starting point is not for the user's visual ability to accept, then do not use, 62.5% if you want to do, put the scale into place, do not do dabbler.

In addition, for the beginning of this section 16px of the situation, here to provide you with a move (I have studied the current no one so use, but also the idea of an epiphany).

What are the disadvantages of using media query? It is a segmented function that applies the [320, 360) same set of scenarios for screens with widths within the range. The perfect one should be a linear function, how to do it? Very simple, can be used vw .

HTML {    font-size:4.266667vw;}

It's nice to replace the previous 6 lengthy media Query with 1 lines of code.

How to improve the readability of REM

Let's talk about one last topic.

When you know html font-size how to set up, you must want to ask, do I write code every time I have to do a division, the rem value of the calculation it?

I believe that a little bit of "modern" developers will use CSS preprocessing. Based on this tool, things are good to LESS do, for example, two steps are as follows:

1. According to the iphone 6 visual artwork, the base font size is 16px, so you can set a less variable. @px: 16rem;//2. By the less built-in division automatic operation. For example, the use of 16px font size, written 16/@px can, and finally calculated as 1rem. example {    font-size:16/@px;    margin:20/@px 0;    padding:20/@px 10/@px;}

This article gives you a description of how to rem fit, how to set html the value of how to font-size write faster rem .