CSS EM REM и прочие единицы измерения CSS. Что когда использовать? Подробное объяснение на практике.
ฝัง
- เผยแพร่เมื่อ 16 มิ.ย. 2024
- CSS EM REM и прочие единицы измерения CSS. Что когда использовать? Подробное объяснение на практике. В этом уроке я постараюсь максимально подробно, на практических примерах рассказать вам об единицах измерения в CSS. Рассмотрим абсолютные единицы такие как PX и относительные единицы такие как EM, REM, проценты (%), VW, VH, VMIN, VMAX, FR и их особенности. А также выясним, в каких ситуациях лучше использовать ту или иную единицу.
🔴 Набор на курс по верстке: edu.fls.guru
👉 Материалы урока: fls.guru/files/tutorials/css-u...
👉 Шпаргалка из урока: fls.guru/css-units.html
👉 Статья про использование единиц для медиа запросов: zellwk.com/blog/media-query-u...
👉 Полноэкранный (fullscreen) блок: • Полноэкранный (fullscr...
👉 Адаптивное (отзывчивое) CSS свойство: • Адаптивное (отзывчивое...
🚀 Надежный хостинг FirstVDS. Переходи и получай скидку 25% на первый месяц: firstvds.ru/s/muckq
Абсолютная единица - не зависит от значений других свойств. Ее можно назвать еще фиксированной или окончательной.
Относительная единица - зависит от того или иного значения других свойств.
EM - относительная единица, размер формируется относительно размера шрифта (font-size) родителя. Как мы знаем, свойство размера шрифта font-size наследуется потомками. Поэтому, указывая тот или иной размер в EM нужно четко понимать какой размер шрифта влияет на данный элемент. Как и пиксели, значение EM можно указывать дробные.
REM - относительная единица, размер формируется относительно размера шрифта (font-size) в теге html или браузера по умолчанию.
🤟 БЕСПЛАТНЫЙ курс по верстке сайтов (HTML, CSS, JavaScript): • БЕСПЛАТНЫЙ курс по вер...
🔴 Карта канала: miro.com/app/board/o9J_lZB3YKI=/
🔴 Получить доступ к плюшкам + поддержать канал: / freelancerlifestyle
🔴 Курс по верстке: edu.fls.guru
🔴 Telegram канал: t.me/freelancer_lifestyle (teleg.run/freelancer_lifestyle)
🔴 Telegram чат по верстке: t.me/flschat (teleg.run/flschat)
🔴 Facebook: / freelancerlifestyle
🔴 Instagram: / 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-спеціалістами - / @itpassions
👉 @СЛУШАЙ! Канал с интересными историями из жизни.
👋 Меня зовут Женя Андриканич, я IT - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками!
Ссылка на канал: / freelancerlifestyle
#обучение #верстка #фрилансерпожизни
🤟 Живи, а работай в свободное время! ©
Ну что полезно? Спасибо за лайк репост и комментарий!
🔴 Карта канала: miro.com/app/board/o9J_lZB3YKI=/
🔴 Получить доступ к плюшкам + поддержать канал: www.patreon.com/freelancerlifestyle
🔴 Курс по верстке: edu.fls.guru
🔴 Telegram канал: t.me/freelancer_lifestyle (teleg.run/freelancer_lifestyle)
🔴 Telegram чат по верстке: t.me/flschat (teleg.run/flschat)
🔴 Facebook: facebook.com/freelancerlifestyle
🔴 Instagram: instagram.com/freelancer.lifestyle
Самый крутой выпуск!👍 Придется много раз пересматривать, чтобы переварить 🤷. Нет, усвоить.
Да хочу видео по решению проблемы с блоками через js :) Очень хочу. Может не я один
Регулярно делать обучающие/мотивационные видео, вести курс, работать и все это делать в свободное от жизни время. Мне одному кажется, что у Жени в сутках гораздо больше чем 24 часа?)
Возможно)
возможно он работает меньше вас в сутки, отсюда и свободное время на всё остальное?
@@xxxujibu4xxx если это не работа, тогда что? 😅
@@kotlancer это возможно работа, на которую не надо тратить по 8 часов в день.
Когда любишь то что делаешь и это приносит тебе радость, это не работа.
Редко пишу комментарии, но это, это просто фантастика. Я обожаю всякую магию, всякие приемы, которые мало кто знает, а тем более использует. Невероятные эмоции от просмотра. Информации очень полезная и исчерпывающая. Очень заинтриговала магия sass-script ) Спасибо больше за ваш труд!
Пожалуйста!
Мне кажется все давно ждали этого урока )) Совместить со знаниями резиновой верстки и будет огонь! Спасибо тебе добрый человек!
Каждый новый урок от тебя делает мой день, спасибо, ты крут)💖
Пожалуйста!
Какой же вы приятный человек ) смотришь ваши видео и так спокойно становится ненадолго в это не спокойное время. Спасибо вам за ваш труд❤️
Спасибо, Женя! Я ценю ваш труд!
Как всегда отличный контент. Сразу видно огромную работу проделанную автором. Фразы лаконичные и очень информативно емкие. Примеры заранее продуманные и подготовленные. Звук просто на высоте. А контент просто супер. Нам остается просто впитывать каждую секунду ролика поданную автором как на блюдечке. Большое спасибо за Вашу работу и конечно, же успехов и процветания каналу и школе!
Это видео просто чудо! Аж сердце заколотилось)) Выпуск просто бомба спасибо за твои труды!)
Как всегда, вне конкуренции, огромное спасибо, очередной супер урок
Супер важный ролик! Смотрю взахлеб! Спасибо ,Евгений😀
Лайк не глядя, вчера только начал изучать единицы измерения, и тут выходит урок от Евгения 👍👍👍
Я рад)
самое лучшее раскрытие и объяснение темы единиц измерений. Спасибо!!
С каждым новым уроком я всё больше замечаю на сколько html и css интересные и необычные. Спасибо Жень за то что делаешь такие полноценные мануалы по обучению . Обучаюсь не так быстро , но усваиваю твой материал достаточно хорошо. Твой контент лучший из всех существующих! 💗
Спасибо за объяснение, чётко, грамотно и с примерами! Супер!
Уже почти 2 года я подписан на канал и всё это время Женя не перестаёт радовать очень очень очень полезной информацией.
Если бы я сам это искал и тестил на сайте то скорее всего это заняло бы как минимум 1 день. По этому поводу спасибо большое за информацию и время которое ты мне сохранил.
Как все просто и понятно объяснено! Вы настоящий мастер своего дела, спасибо! 🥰
Спасибо за урок! Очень долго ждали!!!
Освоил верстку почти только лишь благодаря вашему курсу! Спасибо!
Уровень преподавания растет от урока к уроку. Обучаться с такими видео намного легче и продуктивнее, чем самому. Спасибо за качественный контент!
Самый полезный и понятный контент на тему верстки и js. Огромное спасибо!!!
Впервые лайкаю все просмотренные ролики на канале😁
Женя!!! Прееелестно! Прееелестно!!!. Просто замечательно полезное видео.
Просто, доступно, интересно!!! Огромное спасибо за вашу работу! Очень приятно слушать и легко воспринимать информацию.
Великолепно! Как раз у меня в задачах было освежить знания по единицам измерения. Спасибо огромное.
Мега полезная инфа! Спасибо огромное! Ты лучший🙏
Спасибо огромное! Никак не мог разобраться со всеми этими em, rem, fr... Одно видео - и все встало понятно! Спасибо!
Блин. Просто шикарно. Огромная работа проделана! Спасибо. Все просто максимально понятно!
Спасибо, очень качественный и не побоюсь сказать эксклюзивный контент. Буквально за пару дней до выхода ролика гуглил про использование rem для блоков, но везде была инфа, что это для шрифтов)
Ваши бесплатные видео лучше большинства платных курсов. Огромное спасибо за ваш труд и с новым годом)
Спасибо за твои труды)) видео очень качественное и полезное!
Мне казалось, верстая 2 года, я всё знаю об единицах измерения, но это не так... В этом видео я узнал некоторые новые вещи для себя. Ещё раз спасибо :)
Как всегда информативно и понятно) Благодарю сердечно!
Каждый раз, когда что-то верстаю, думаю, что отлично получилось. Но после очередного просмотренного твоего выпуска, понимаю, что можно было проше и гораздо лучше. Информация, подача, доступность - все на высшем уровне. Спасибо огромное за твой труд! Контент действительно очень полезный и интересный. Желаю успехов и роста во всем!
Огромное спасибо за подробно изложенный материал !!!
ОБЬЯСНЕНИЯ, КАК ВСЕГДА НА ВЫСОТЕ !!! лучший учитель-блогер , которого я нашел. Ничего лишнего , все разжевано , практически все понятно . ЛУЧШИЙ !!! Спасибо за бесплатный огромный доступный труд !!!!!!!
Таким и должно быть обучающее видео, никакой воды, все четко и по существу. Объяснение грамотное, с хорошей дикцией и все понятно. Очень благодарен, подписался)
Один из лучших!). Таких блогеров про фронтенд на постсоветском пространстве на пальцах одной руки. Столько полезной инфы, весь код можно сказать отточен до идеального состояния по надежности, продуманности и красоте результата. И человек видно хороший. Удачи тебе!)
Спасибо! Это однозначно один из лучших каналов в русскоговорящем ютьюбе. Интересные темы, доступное изложение, мотивирующая подача. Очень круто!
Ооо в видосил залетел комментик отписал. Глубоко поблагодарил Евгения за его труды:)
Ещё одно видео!
Такими темпами у каждого интересующегося будет достаточное количество инфы на ближайшие 5 лет в плане вëрстки и фронтенд разработки в целом. Спасибо! Лучший!
Посмотрела подпись к ролику, подумала, что да, интересно, нужно посмотреть. Но я не ожидала, что мне придется пересматривать этот ролик три раза, столько нюансов! Огромное спасибо за труд, за знания, которыми вы делитесь.
Очень круто и полезно! Спасибо за урок!
Женя! Ты лучший!
Часто попадалось это видео, но я пролистывала его, мол чего я в ремах не знаю. А вот много чего!
Ютуб был создан для того, чтобы ты делал эти прекрасные уроки! Спасибо за труд 🧡
Огромное спасибо за крутые уроки 💪!
Урок супер! И очень вовремя.
Честно это просто супер урок. Мескины меня сильно удивили. Ранее не использал мексины и это честно магия эволюции
Благодарю за уроки Евгений. вчера только посмотрел урок про полноэкранные блоки , где ты говорил что запишешь видео про единицы измерения и .... вуаля. лайк однозначно!
Спасибо за такие замечательные уроки, Сколько я проходил уроки Верстки, ни где информация так быстро до меня не доходила!
Как всегда отличное, очень информативное видео! Спасибо!
Как раз вчера разбирался с responsiv версткой, и тут материал для закрепления от Жеки) Он просто зверь, читает мысли))
Спасибо огромное. Смотрю твой ролик 1 января 2022 года. Очень полезное и понятное видео. Хотел бы также поздравить тебя с новым годом, пожелать чтобы все твои мечты сбылись, здоровья и огромного счастья.
Спасибо Вам огромное за отличный урок!
Спасибо огромное за урок! Вы мастерски преподносите материал!
Спасибо за ваши видео, Евгений
Отлично, как всегда!
Спасибо!
Всё гениальное просто. Из твоих уст (../методики/монтажа/примеров/ и т.д.) всё просто и гениально))
Оххх, столько материала за раз не переваришь)) Очень круто, очень полезно, ждем новую версию шаблона и по полной погружаемся в относительные единицы!)
Огромное спасибо!
Просто супер. Особенно умилила фраза "я очень волнуюсь" ))
Женя, спасибо. Мне везёт, начала разбираться с единицами, а тут видос подвезли. Всё понятно. Лайк
Хороший урок! Много полезной информации которую я буду использовать.
Огромное Спасибо за Ваш труд!
отличный учебный материал, каждый момент разобран до мелочей!
Лучший из лучших!Ждем новых уроков!Женя КРАСАВА!!
Евгений, вы наше всё!
Дякую за таке корисне відео. В якийсь момент мій мозок зламався, що вказує на потребу в більшій кількості практики, але однозначно честь і хвала за такий бомбічний контент.
*интересно было. Спасибо друг* 💪
Блин кайфую от подачи) Спасибо за проделанный труд!
Как всегда все супер круто. Спасибо!!!
За SCSS-функции особая благодарность!
Почему у меня не работае функция? Неизвестное свойство math выдаёт
Класс, Евгений, спасибо!
У тебя просто талант к преподаванию!!!!!
Очередной лайк!!!!!
Очень крутой материал. Огромное спасибо!!!!!
Пожалуйста! Рад что полезно!
Спасибо. Очень полезная информация.
Круто, познавательно, полезно)
Спасибо)
Лайк не глядя!
Давно ждем)
Спасибо!
О, спасибо. Как раз понял, что надо разобраться в этом и тут кстати ролик 🥳
Я рад!
Урааааааааа ! очень актуальный выпуск
Спасибо тебе женя прошел практически весь бесплатный курс по верстке и сверстал 2 начинающего макета для начала но впереди только больше
Ну вот и вспомнил CSS и HTML по этому замечательному плейлисту. Всё структурировано, лаконично, понятно. Конечно это далеко не весь CSS но тут вся основа, для того чтобы двигаться дальше. Большое спасибо за труд. *Лайки ставить не забывал)))
Ахахаха, как в воду глядел, я как раз хотел на днях углубить свои знания в новых единицах ))) Конечно, твой ролик не отменит чтения книги и MDN, но ща на велик и буду смотреть! Твой контент я бы сказал ДА - содержательный, но лично для меня польза его больше в другом - зажигает интерес к теме и мотивирует идти и углублять знания быстрее через книги/доки и, безусловно, практику! :) Ну и шикарная подача контента - очень важно, большая редкость на ютубе.
Отличное видео! Все очень понятно и интересно! Жду новых уроков)
Я рад!
Круто, спасибо за проделанную работу. Было бы круто, если бы появились видео об инструменте разработчика и о необходимых плагинах браузера для верстки.
Ох, наконец-то. Спасибо!
спасибо Вам большое, Вы настоящий человек!
Так грамотно и доходчиво объяснил, спасибо.👍
Пожалуйста!
Невероятно полезно. Ну и увлекательно!!!
Дорогой, Женя! Спасибо! Дякую! Thank you! Vielen Dank! Merci!
Пожалуйста!
Спасибо Жень, хотелось бы продолжения . На примерах и для адаптивной вёрстки.
Как раз то что нужно! Большое спасибо!
Пожалуйста!
Чудовий гайд!
Как всегда все шикарно и понятно)
Найкраще та найдетальніше відео з поясненням про одиниці вімірювання в ютубі 👍🏻
Всегда проверяю не забыл ли я поставить лайк под видео. Спасибо за годный контент сразу руки зачесались сверстать что-нибудь новое с полученными знаниями.
Супер!
Жека, Велике спасибі за цей урок, пояснив складні речі простими словами! 👍
Мужик, ты шикарен!
Шикарный материал!
Крутяк, супер, так все разложил, красава), спасибо, честно до этого для меня это была каробка пандоры.
Мастер своего дела. Молодец.
Все как всегда грамотно и полезно!
Очень интересно, спасибо за труд
Хоть и работаю с этими всеми единицами, но почерпнул прилично)) спасибо)
спасибо ! интересно было послушать 🔥
Спасибо за урок очень доступно объяснил. теперь придётся привыкать к rem