What units is preferable for the adaptive layout CSS 3?

Other like: mm ... not rassmatrivaem.
1 - vh + vw
2 - %
3 - em
4 - rem
5 - px
6 - ex
7 - ch
July 8th 19 at 11:41
3 answers
July 8th 19 at 11:43
1. Font sizes and margins for all text elements (the typography: headings, paragraphs, etc.) set in em. To be easy to scale while maintaining the proportions of the padding (see point 4).

1.1. For titles as a progressive enhancement, you can optionally specify the font size in vw. View example — codepen.io/paulradzkov/pen/jqYqgY
vw and vh is already widely supported (caniuse.com/#search=vw)if you don't make up for China.

2. The size of the form elements (input button), their fields and sometimes the boarders to ask em. They were the same scale with the surrounding text. And also see point 4.

3. The width of the grid columns, sidebars and other layout elements in the General case, be set in %.

3.1. If the width of something depends on its content, not from the width of the viewport, it is better to use rem* or to impose through flex without specifying the width explicitly.

3.2. Padding layout elements, the gutter between the columns in the rem*. Sometimes the design must be specified in %.

4. The size of the font larger modules is better to ask in the rem*. For example, we write:

.promo {
 font-size: 1.2 rem;

.sidebar {
 font-size: 0.8 rem;

Due to the fact that we have items 1) and 2) in em-Ah, fonts and form in promo block in the sidebar and will change again at 1.2 and 0.8 times. However, if you can stick it .promo inside .sidebar, the font size of the promo block will still be 1.2 times more than the default text. Ie not depends on the context.

5. For @media statements recommend the use of em, because earlier browsers was a bug (it seems everything was already fixed) when a user has the page scale (ctrl + ± or ctrl + scroll), there is an unwanted horizontal scrolling. I always wrote in the px and never with such bugs are encountered.

6. If you want to scale the entire site, then using @media queries you can change the font size of html element in px. Then all that was set in rem and em will respond to this change.

* — if you do not change or plan to change the font size of the html element, then everywhere instead of rem you can safely write px. Nothing will change.

All other units of measurement are used in particular cases. For printing you may need a mm or pt; for the height of the fixed elements — vh; ex and ch for typographical frills.
Hello! Tell me, is this information still relevant?? Just saw somewhere that you can have the font sizes safely set in px. - Godfrey commented on July 8th 19 at 11:46
: Yes, current - jaycee commented on July 8th 19 at 11:49
July 8th 19 at 11:45
em \rem very convenient!
1 - vh + vw - browser support is still not very good, but generic
July 8th 19 at 11:47
em/rem for font size
% the width of the blocks and indentation
vh + vw in special cases
"% width blocks and indents" – why? - Godfrey commented on July 8th 19 at 11:50

Find more questions by tags HTML