Единицы измерения

Пиксели фиксированные: 250 пикселей — это 250 пикселей и на телефоне, и на большом мониторе. Для мелочей это хорошо, но крупным частям страницы часто нужны размеры, которые подстраиваются под экран. Для этого есть другие единицы:

• % (процент) — доля от размера родителя. width: 50% означает половину ширины родителя. (В height проценты работают, только если у родителя задана высота, поэтому их в основном используют для ширины.)
• vw и vh (viewport width и viewport height, то есть ширина и высота области просмотра) — 1% ширины или высоты окна браузера. Элемент с height: 100vh по высоте равен всему окну. В наших упражнениях окно — это область предпросмотра.
• rem, который вы знаете из предыдущего урока: 1rem — это базовый размер шрифта, обычно 16 пикселей. Он подходит для размеров, которые должны расти вместе с текстом, например когда посетитель выбирает в браузере более крупный шрифт.

Элемент section с текстом сейчас занимает всю ширину страницы. На широком экране строки текста получаются очень длинными, и их трудно читать. Сделаем его уже с помощью процентов, чтобы он подходил под любой экран.