CSS units for font-size: px, %, em, rem, vw, vh, vmin, vmax 

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

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

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

Видео супер! Спасибо, Анна!

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

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

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

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

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

Благодарю Вас за видео.

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

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

Красота!!!

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

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

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

Спасибо! всё внятно и доходчиво =)

Спасибо, всё чётко и понятно!

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

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

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

3 вопроса Анне: 1) А если мы вместо селектора :root укажем селектор тега, т.е. html, будут ли работать rem у других элементов? 2) Можно ли, не прибегая к калькулятору, изменять значения в корневом каталоге, указывая в px или тогда rem у других селекторов сломается? 3) Я правильно понял, что vmin и vmax будут вычисляться относительно того, что меньше: если меньше высота, то относительно высоты, если ширина - то ширины, или механизм другой?

ты молодец куколка, СУПЕР!!!

Спасибо большое

Отличное видео

Супер, спасибо!

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

Ждем 2ю часть

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

Спасибо

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

Молодець)

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

Пару вопросов. 1. почему в html сразу не прописать fz:10px? 2 Думаю на данный момент производительности браузеров хватает сил rem перевести в px. После пары случаев кода клиенты при приемке проекта(4-10 страниц) вдруг потребовалась версия для слабовидящих резко перешел на rem. Собственно 2й вопрос зачем в px все переводить? Ради производительности?

13:14 - в body прописывается 1,4rem и все счастливы 👌от боди будут отталкиваться уже все остальные

Молодец

Где можно приобрести такую книгу? Спасибо

Какая красивая девушка! А взгляд завораживает!)))

А почему бы в примере 12:24 не использовать для :root размер в px?

Я использую html font-size 62.5%, и для body font-size x rem (где x- дефолт шрифт текста в макете 1.4-1.6rem обычно) по мне это самое удобное, перевод 10px в 1rem. И более удобно одним медиа запросом менять font-size для html.

О, Создатель! Я хочу от этой женщины ребёнка с такими же глазками как у неё.❤

А что сами предпочитаете использовать в повседневной работе для web ?

Спасибо тебе за данное видео. Сам я Техник-программист, когда учился мы создовали сайты только в HTML мы даже не работали с CSS. Сейчас изучаю вёрсту, вот мои поиски привили к тебе. Спасибо что ведёшь блок для меня и других начинающих и опытных верстальщиков. Удачи тебе и здоровья)

em вообще какой-то не такой. em - Разница между rem и em в том что rem в любой вложенности заставляет элементы смотреть на html или :root{}, получать там значение в px(любые единицы переводятся в px) и умножает на rem наследованный rem. em же заставляет брать элементам ближайшее родительское значение px и умножает на em. em какой-то не предсказуемый. С разными тегами именно во вложенности он по разному себя ведёт. Проблемы. 1. Нужно чётко следить сколько пикселей наследует блок(родитель) в котором хотим менять значения на em. Конечно же если манипулируем ещё пикселями. 2. Явление роста или уменьшения шрифта во вложенных списках друг в друга.(в div нет такого) 3. не наследует em. умножает свой em на ближайшие px, а вложенность наследует px не этого родителя, а выше

Необычные глаза) радужка по краям черная, а ближе к зрачку синеет и светлеет))

Вот эта прическа топ!

Почему так сложно, в случае с rem можно задать html, body font-size:16px (или 10 чтобы удобно было использовать rem) И при 10px, задаём элементу 1.6 rem получаем 16px, в медиа меняй в корне пиксели и ремы подстраиваются

Крутяк

Аня, ты очень красивая ^^ И материал очень полезный. Лайк и подписка =D

Спасибо за познавательный ролик) Расскажите подробнее, пожалуйста, в чем разница между % и ем. P.S. 400 не пикселей, а процентов.

Любимая стриммерка!))

а попадались на жизненном пути востребованные нетипичные вестальщики ?

В её глаза можно смотреть вечно...

Я в своих проектах использую только rem и не парюсь.

Спасибо, очень помогла! P.S. Настолько голубых глаз в жизни эще не видел)

это линзы?

Ребята, я начинающий. Возник такой вопрос. Я вот смотрел на биржах фрилансеров заказы. И те из них, которые требуют верстки только на html, css и js ооооочень малое количество. В основном, заказы требующие "натянуть" сайт на какой-то CMS. Так вот и вопрос: возможно ли выйти новичку на зароботок, хоть и малый, но стабильный, с такой ситуацией с заказами? А за видео огромное спасибо! Наконец-то я понял эти величины. Вы молодец!

Не проще в :root указать px? Зачем в нём так выёживаться с em или rem?

а какие глаза!!! прям про CSS забываешь...

Ань, привет. Ролик получился отличный. Было бы классно, если б ты видео делала, как у Тревиса с канала DevTips, когда и код в кадре, и автора чуть-чуть. Харизмы у тебя хватает, а то что зрители отвлекаться будут, так это их проблемы 😁 Может кто-то подписывается, чтобы прийти на тебя посмотреть 😎

Лайк тожи поставил

С процентами в font-size никогда не пользовался посмотрев видео понял что они для font-size работает точно так же как em вот только про это не упоминали

Не очень понятно зачем столько единиц измерения для шрифта. На практике видел только px и rem. Сам использовал rem с медиа запросами, для одинакового (пропорционального) отображения текста/элементов на разных разрешениях экрана. Единицы %, vw, vh видел как используют только для позиционирования - разделения областей, например ширина блока 30% экрана.

спасибо за видео! подскажи пожалуйста, как ты заряжаешь свой макбук? я его заряжаю до 98%, убираю с зарядки и разряжаю до 8%. Но я много работаю на нем и порой в день таких процессов может быть 2 и больше. или лучше постоянно держать его на зарядке, а ночью вытаскивать?

Два раза пересмотрел, начиная на ем перестаю понимать.(

Анна, а вы не ошиблись с процентами, что 100% это 16px, а 200% это 32px? Потому что базовый же 16px, а 200% в два раза, этого не понял (5:38), попробовал и вроде ошибка.

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

Доставка в Узбекистан имеется? я про (Frontend book)

ай какая умка, молодец, и спасибо=)

над в точку сделать, этот бук, можно и рисовать и писать

4.08 - ...будут преобразовыватся в проценты - оговорочка. в пискели на самом деле

Ubuntu классный шрифт.

Так тебе намного лучше

Она так смотрит, что мне страшно

Я так делаю html font-size 62.5% // 10px body font-size 1.6rem // 16px Неправильно, да?

Всё... влюбился... Подписываюсь однозначно! ))

Анна, зачем ты мучиешь себя контактными линзами?

5:47 оговорка

Шаришь однако!!!

PX в CSS не всегда физический, особенно на экранах с большей плотностью пикселей

ежедневник классный, сразу захотел себе такой и перешёл на сайт, чтобы купить.... и не купил( Анна, 2500 за ежедневник, ну камон((( я лучше за 1500 куплю JS от флэнагана на 1к страниц(

В чем прикол использовать в root проценты или рэмы, высчитывать что-то с калькулятором? html font-size: 1px body font-size: 16rem; .header font-size: 25rem В коде которым вы собираетесь делиться не должно быть rem, хрен знает как его будет использовать другой.

+

Жалко книжку в 2022 не купить(

Такое впечатление, что у Анны первый иностранный был французский )) V - это "ви", не "уи" )) хотя , французский ,согласитесь, ей больше был бы к лицу)) милая)

Блин это реальные глаза или линзы?

.

Девушка, слишком много рекламы, мысль теряется. Если б это был развлекательный ролик, куда ни шло. Вы забываете, что сейчас ютуб ставит две рекламы подряд за один раз. Смотреть их одно мучение. Я могу еще потерпеть рекламу в конце и в начале ролика и всё. Можно конечно пропустить, но эти пять секунд на два бесят!!!

Уважаемая когда произносишь i у тебя больше ы получается. Это колхозно звучит.

Почему нельзя было в шараге , с такой подачей учить :)...... лучше объяснения данной темы не найти .

Давайте без "давайте"

бесит вот это "lorem" да ещё и "Ipsum" бєєє, и подобное на латыни, Почему народ это использует??

Дизлайк👍👍👍

Слабенько