Единицы измерения CSS для font-size: px, %, em, rem, vw, vh, vmin, vmax

Наглядное пособие по работе с единицами измерения CSS с font-size: px, %, em, rem, vw, vh, vmin и vmax.

______________

[mysteriousxcodesterio]

Анна спасибо большое, прошу вас не останавливайтесь мы ждет от вас помощи и объяснений в разных темах, спасибо что вы есть и помогаите нам) еще раз большое спасибо ваш труд очень важен для нас

[VasyaStoneoy]

Ура! Ждал нового видео с нетерпением! Спасибо, Анна :) добра Вам!

[olesiaeremina]

Анна, какая вы умница, спасибо вам большое за все эти уроки

[sergeyvorobev]

Отлично и доходчиво, благодарю, стал лучше понимать в em и rem, давно хотел перейти на эти единицы)

[progerlife]

Всегда использую при мобильной верстке vmin, и vmax. Спасибо за труды. Жду новые видео) Лайк)

[BigDaddy-zphz]

умница, нет воды и все по делу рассказала

[jixwdxt]

Анна, спасибо за прекрасный разбор! Мне очень помогло!

[Sward]

Спасибо за полезное видео, я под конец уже стал засыпать от такого приятного голоса)

[oieqkbj]

Видос как нельзя к стати мне попался, много чего я оказывается не знала про единицы измерения, а что то даже забыла, большое спасибо за увлекательный и познавательный ролик

[fanfish]

Спасибо за хорошие пример с rem, как раз не мог определится, использовать или нет, однозначно да)

[zarant]

Какая красавица! Спасибо большое за такое прекрасное видео и Ваше личное сочетание красоты и ума!

[KAMEKS]

Аня, спасибо за труды!
Дополню, что можно задать:
html {font-size: 62.5%;}
body {font-size: 1.4rem;} //если нужен дефолтный нормальный размер
ну а дальше в нужных местах отталкиваться от 62.5% (он же 10px) и всё будет норм.... при этом, если необходимо будет масштабировать все размеры шрифтов, то надо будет только изменить размер в селекторе html, остальное подтянется пропорционально... ну это я так, объяснил немного по-другому для тех, кто не понял :)

[antonmaklakov]

Спасибо за разъясняющее видео! Обычно, когда я верстал, я чисто наугад подбирал единицы измерения, типо:"Ну, работает, и ладно" )

[alexpop]

Спасибо за труды, но... видео без вывода. В каких случаях применять ту или иную размерность? Почему? Актуальность разновидности размерности на сегодняшний день. И на будущие, просьба рассмотреть стилизацию <select> и <option>, не в классическом виде (браузерная реализация), а в разрезе дизайн-макета (хотелок дизайнера).

[anvarturdaliev]

у меня вопрос
как узнать пикселей в процентах.
например у меня: margin-top:500px и я хочу это указать в процентах?
обший размер каркаса(контейнера) 1200px

[cbxjlgl]

Спасибо, Анна! Устал пользоваться гуглом. Теперь буду пересматривать этот видос

[cubuanic]

Использую мак прошку, 13"
В новом табе в хроме, открываю дев-тулс и смотрю рассчитанные свойства для body, и вижу там что ширина 1280 пикселей.
Почему так?
Ведь у прошки ретина и у 13" ширина в пикселях - 2560

[evgeniyprowork]

как вариант в зависимости от нужд и самого проекта можно обойтись этим:
html, body {
font-size: calc(1rem + 1vw);
}
или
html, body {
font-size: calc(1rem + 0.2vw);
}
или любой подходящий под проект вариант

[gringo]

Коротко про EM и REM для тех кто не понял: это те же проценты (%) но в виде цельных или дробных чисел.
Например: 150% = 1.5 ( так как что бы найти 150% от любого числа, его надо умножить на 150/100 то есть на 1, 5)
80% = 0.8;
320% = 3, 2;
17% = 0, 17;

[eugenefedoryachenko]

Оо, я давно хотел это узнать. Спасибо!