CSS EM REM и прочие единицы измерения CSS. Что когда использовать? Подробное объяснение на практике.
CSS EM REM и прочие единицы измерения CSS. Что когда использовать? Подробное объяснение на практике. В этом уроке я постараюсь максимально подробно, на практических примерах рассказать вам об единицах измерения в CSS. Рассмотрим абсолютные единицы такие как PX и относительные единицы такие как EM, REM, проценты (%), VW, VH, VMIN, VMAX, FR и их особенности. А также выясним, в каких ситуациях лучше использовать ту или иную единицу.
🔴 Набор на курс по верстке: https://edu.fls.guru
👉 Материалы урока: http://fls.guru/files/tutorials/css-units.zip
👉 Шпаргалка из урока: https://fls.guru/css-units.html
👉 Статья про использование единиц для медиа запросов: https://zellwk.com/blog/media-query-units/
👉 Полноэкранный (fullscreen) блок: https://www.youtube.com/watch?v=6pgRn79v7lE&list=PLM6XATa8CAG6IJvQBkrTTNZmpIcyS2Avk&index=14
👉 Адаптивное (отзывчивое) CSS свойство: https://www.youtube.com/watch?v=eaOAY0vIB4U&list=PLM6XATa8CAG6IJvQBkrTTNZmpIcyS2Avk&index=26
🚀 Надежный хостинг FirstVDS. Переходи и получай скидку 25% на первый месяц: https://firstvds.ru/s/muckq
Абсолютная единица - не зависит от значений других свойств. Ее можно назвать еще фиксированной или окончательной.
Относительная единица - зависит от того или иного значения других свойств.
EM – относительная единица, размер формируется относительно размера шрифта (font-size) родителя. Как мы знаем, свойство размера шрифта font-size наследуется потомками. Поэтому, указывая тот или иной размер в EM нужно четко понимать какой размер шрифта влияет на данный элемент. Как и пиксели, значение EM можно указывать дробные.
REM - относительная единица, размер формируется относительно размера шрифта (font-size) в теге html или браузера по умолчанию.
🤟 БЕСПЛАТНЫЙ курс по верстке сайтов (HTML, CSS, JavaScript): https://www.youtube.com/playlist?list=PLM6XATa8CAG4F9nAIYNS5oAiPotxwLFIr
🔴 Карта канала: https://miro.com/app/board/o9J_lZB3YKI=/
🔴 Получить доступ к плюшкам + поддержать канал: https://www.patreon.com/freelancerlifestyle
🔴 Курс по верстке: https://edu.fls.guru
🔴 Telegram канал: https://t.me/freelancer_lifestyle (https://teleg.run/freelancer_lifestyle)
🔴 Telegram чат по верстке: https://t.me/flschat (https://teleg.run/flschat)
🔴 Facebook: https://www.facebook.com/freelancerlifestyle
🔴 Instagram: https://www.instagram.com/freelancer.lifestyle
00:00 - В уроке
00:23 - Абсолютные и относительные единицы в CSS
00:42 - CSS пиксели (PX)
04:07 - CSS EM
10:06 - CSS REM
13:16 - CSS проценты (%)
14:55 - CSS VW, VH, VMIN, VMAX
19:19 - FR и прочие единицы измерения в CSS
20:46 - Единицы измерения в CSS на практике
37:22 - Чудеса и лавхаки
39:58 - Выводы. Какие единицы где использовать?
👉 @IT-ПРИСТРАСТІ, українськомовний канал присвячений інтерв'ю з цікавими IT-спеціалістами - https://www.youtube.com/channel/UCJNVBfLijFSa_tBcrNZKZag
👉 @СЛУШАЙ! Канал с интересными историями из жизни.
👋 Меня зовут Женя Андриканич, я IT - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками!
Ссылка на канал: https://www.youtube.com/c/freelancerlifestyle
#обучение #верстка #фрилансерпожизни
🤟 Живи, а работай в свободное время! ©
Видео CSS EM REM и прочие единицы измерения CSS. Что когда использовать? Подробное объяснение на практике. канала Фрилансер по жизни - IT и фриланс
🔴 Набор на курс по верстке: https://edu.fls.guru
👉 Материалы урока: http://fls.guru/files/tutorials/css-units.zip
👉 Шпаргалка из урока: https://fls.guru/css-units.html
👉 Статья про использование единиц для медиа запросов: https://zellwk.com/blog/media-query-units/
👉 Полноэкранный (fullscreen) блок: https://www.youtube.com/watch?v=6pgRn79v7lE&list=PLM6XATa8CAG6IJvQBkrTTNZmpIcyS2Avk&index=14
👉 Адаптивное (отзывчивое) CSS свойство: https://www.youtube.com/watch?v=eaOAY0vIB4U&list=PLM6XATa8CAG6IJvQBkrTTNZmpIcyS2Avk&index=26
🚀 Надежный хостинг FirstVDS. Переходи и получай скидку 25% на первый месяц: https://firstvds.ru/s/muckq
Абсолютная единица - не зависит от значений других свойств. Ее можно назвать еще фиксированной или окончательной.
Относительная единица - зависит от того или иного значения других свойств.
EM – относительная единица, размер формируется относительно размера шрифта (font-size) родителя. Как мы знаем, свойство размера шрифта font-size наследуется потомками. Поэтому, указывая тот или иной размер в EM нужно четко понимать какой размер шрифта влияет на данный элемент. Как и пиксели, значение EM можно указывать дробные.
REM - относительная единица, размер формируется относительно размера шрифта (font-size) в теге html или браузера по умолчанию.
🤟 БЕСПЛАТНЫЙ курс по верстке сайтов (HTML, CSS, JavaScript): https://www.youtube.com/playlist?list=PLM6XATa8CAG4F9nAIYNS5oAiPotxwLFIr
🔴 Карта канала: https://miro.com/app/board/o9J_lZB3YKI=/
🔴 Получить доступ к плюшкам + поддержать канал: https://www.patreon.com/freelancerlifestyle
🔴 Курс по верстке: https://edu.fls.guru
🔴 Telegram канал: https://t.me/freelancer_lifestyle (https://teleg.run/freelancer_lifestyle)
🔴 Telegram чат по верстке: https://t.me/flschat (https://teleg.run/flschat)
🔴 Facebook: https://www.facebook.com/freelancerlifestyle
🔴 Instagram: https://www.instagram.com/freelancer.lifestyle
00:00 - В уроке
00:23 - Абсолютные и относительные единицы в CSS
00:42 - CSS пиксели (PX)
04:07 - CSS EM
10:06 - CSS REM
13:16 - CSS проценты (%)
14:55 - CSS VW, VH, VMIN, VMAX
19:19 - FR и прочие единицы измерения в CSS
20:46 - Единицы измерения в CSS на практике
37:22 - Чудеса и лавхаки
39:58 - Выводы. Какие единицы где использовать?
👉 @IT-ПРИСТРАСТІ, українськомовний канал присвячений інтерв'ю з цікавими IT-спеціалістами - https://www.youtube.com/channel/UCJNVBfLijFSa_tBcrNZKZag
👉 @СЛУШАЙ! Канал с интересными историями из жизни.
👋 Меня зовут Женя Андриканич, я IT - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками!
Ссылка на канал: https://www.youtube.com/c/freelancerlifestyle
#обучение #верстка #фрилансерпожизни
🤟 Живи, а работай в свободное время! ©
Видео CSS EM REM и прочие единицы измерения CSS. Что когда использовать? Подробное объяснение на практике. канала Фрилансер по жизни - IT и фриланс
Показать
Комментарии отсутствуют
Информация о видео
24 ноября 2021 г. 12:00:57
00:41:17
Другие видео канала
![JQUERY ПРОТИВ JAVASCRIPT. Стоит ли учить jQuery в 2021? Что лучше для развития программиста?](https://i.ytimg.com/vi/mX_jE18Zuyg/default.jpg)
![](https://i.ytimg.com/vi/PYTOZ1MqjOQ/default.jpg)
![](https://i.ytimg.com/vi/4AaZ_xu7Ies/default.jpg)
![Адаптивная верстка сайта с нуля для начинающих. Объяснение действий. HTML CSS](https://i.ytimg.com/vi/f-irDQwt1l4/default.jpg)
![Дмитрий Побединский о том, жив или мертв кот Шредингера — квантовая физика для чайников](https://i.ytimg.com/vi/y97doHj3ryU/default.jpg)
![Как я стал веб-разработчиком фрилансером. Мотивация для начинающих. Фрилансер по жизни. #itstory2019](https://i.ytimg.com/vi/afRm1BF6QCU/default.jpg)
![CSS px vs rem in 2020 - Which One to Use?](https://i.ytimg.com/vi/grMe8QREvA8/default.jpg)
![Сколько зарабатывают программисты и другие IT-специалисты? Рассказываю о своем доходе на фрилансе!](https://i.ytimg.com/vi/NhpQiiVYEv4/default.jpg)
![VS Code настройка установка плагины // Подробный гайд VS Code за час // VS Code видео обучение](https://i.ytimg.com/vi/nxCLXMBl4e4/default.jpg)
![Методология БЭМ за 17 минут. Пример верстки по БЭМ методологии // Фрилансер по жизни](https://i.ytimg.com/vi/HihYQVuH64U/default.jpg)
![Are you using the right CSS units?](https://i.ytimg.com/vi/N5wpD9Ov_To/default.jpg)
![С ЧЕГО НАЧАТЬ обучение в IT-сфере? Советы начинающим. Четыре фактора успешного старта в IT. Мой опыт](https://i.ytimg.com/vi/ESITUo-WX1c/default.jpg)
![Кирилл Половников: "«Парадоксы» квантовой механики"](https://i.ytimg.com/vi/RQsOG0VM6qw/default.jpg)
![Основы синтаксиса JAVASCRIPT. Структура кода. Инструкции. Режим use strict. Уроки JAVASCRIPT с нуля.](https://i.ytimg.com/vi/uOeFpp872MY/default.jpg)
![Единицы измерения CSS для padding, margin, height, width: px, %, em, rem, vw, vh, vmin, vmax](https://i.ytimg.com/vi/ZuSIlE9jj2k/default.jpg)
![Адаптивный шрифт. Пример реализации отзывчивого (резинового) шрифта на CSS + SCSS миксин](https://i.ytimg.com/vi/HJZP5QsrpXs/default.jpg)
![Все о CSS переходах (transitions) за 16 минут. CSS анимация. Часть первая.](https://i.ytimg.com/vi/yZFg3cuq_LU/default.jpg)
![CSS transform. 2D и 3D трансформации translate, scale, rotate и другие](https://i.ytimg.com/vi/uQEGUpsnqsw/default.jpg)
![50 вопросов по CSS. Собеседование на HTML верстальщика. Проверь свои знания!](https://i.ytimg.com/vi/4YRG6cMAASI/default.jpg)
![Адаптивная вёрстка сайтов за 37 минут + макет. Тебе не нужен Bootstrap! [ENG SUBS]](https://i.ytimg.com/vi/XbnAKjjlgc4/default.jpg)