CSS EM REM и прочие единицы измерения CSS. Что когда использовать? Подробное объяснение на практике.

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
#обучение #верстка #фрилансерпожизни
🤟 Живи, а работай в свободное время! ©

[@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

[@smert-chekistam]

Самый крутой выпуск!👍 Придется много раз пересматривать, чтобы переварить 🤷. Нет, усвоить.

[@Anderson-jy8bn]

Да хочу видео по решению проблемы с блоками через js :) Очень хочу. Может не я один

[@igorfeticov]

Регулярно делать обучающие/мотивационные видео, вести курс, работать и все это делать в свободное от жизни время. Мне одному кажется, что у Жени в сутках гораздо больше чем 24 часа?)

[@FreelancerLifeStyle]

Возможно)

[@xxxujibu4xxx]

возможно он работает меньше вас в сутки, отсюда и свободное время на всё остальное?

[@kotlancer]

@@xxxujibu4xxx если это не работа, тогда что? 😅

[@xxxujibu4xxx]

@@kotlancer это возможно работа, на которую не надо тратить по 8 часов в день.

[@eugeniotur]

Когда любишь то что делаешь и это приносит тебе радость, это не работа.

[@miheyjumanjy8082]

ля чел ты реально валиш, я ток начал постигать web и мне кто-то посоветовал твои уроки...и не зря. мощааа.все разжевано понятно,ноя один фиг туплю... этот урок уже несколько дней учуууу

[@Kirichenko_Sl]

Якось один з викладачів курсів (не називатиму прізвище) сказав: "HTML можна вивчити за 2 дні, JS можна освоїти за 2 місяці, а CSS можна вчити все життя і постійно дивуватись його можливостям!" - так і є! Жека, знову ДЯКУЮ за такий змістовний і такий важливий урок!!!!!

[@ugenedev]

Редко пишу комментарии, но это, это просто фантастика. Я обожаю всякую магию, всякие приемы, которые мало кто знает, а тем более использует. Невероятные эмоции от просмотра. Информации очень полезная и исчерпывающая. Очень заинтриговала магия sass-script ) Спасибо больше за ваш труд!

[@FreelancerLifeStyle]

Пожалуйста!

[@FradPR]

Довго не розумів,чому і навіщо використовують ці Em та Rem,та завдяки Вам,всеж-таки зрозумів,а ці лайфхаки - скарб,дякую за працю!!!

[@07km]

Лайк не глядя, вчера только начал изучать единицы измерения, и тут выходит урок от Евгения 👍👍👍

[@FreelancerLifeStyle]

Я рад)

[@deniskotov]

Дорогой, Женя! Спасибо! Дякую! Thank you! Vielen Dank! Merci!

[@FreelancerLifeStyle]

Пожалуйста!

[@DrGonzonik]

Таким и должно быть обучающее видео, никакой воды, все четко и по существу. Объяснение грамотное, с хорошей дикцией и все понятно. Очень благодарен, подписался)

[@internetlift]

Честно это просто супер урок. Мескины меня сильно удивили. Ранее не использал мексины и это честно магия эволюции

[@Faradenza-sb3mj]

У вас курсы круче чем платные!.

[@sergmalin210]

Уровень преподавания растет от урока к уроку. Обучаться с такими видео намного легче и продуктивнее, чем самому. Спасибо за качественный контент!

[@svetlanapokrovskaya7798]

Посмотрела подпись к ролику, подумала, что да, интересно, нужно посмотреть. Но я не ожидала, что мне придется пересматривать этот ролик три раза, столько нюансов! Огромное спасибо за труд, за знания, которыми вы делитесь.

[@garagem-1937]

Найкраще та найдетальніше відео з поясненням про одиниці вімірювання в ютубі 👍🏻

[@shah7038]

ОБЬЯСНЕНИЯ, КАК ВСЕГДА НА ВЫСОТЕ !!! лучший учитель-блогер , которого я нашел. Ничего лишнего , все разжевано , практически все понятно . ЛУЧШИЙ !!! Спасибо за бесплатный огромный доступный труд !!!!!!!

[@aceracer5556]

Мне кажется все давно ждали этого урока )) Совместить со знаниями резиновой верстки и будет огонь! Спасибо тебе добрый человек!

[@GaponovaT]

Каждый новый урок от тебя делает мой день, спасибо, ты крут)💖

[@FreelancerLifeStyle]

Пожалуйста!

[@user-ue7ul6jv6e]

Женя!!! Прееелестно! Прееелестно!!!. Просто замечательно полезное видео.

[@Alina-ep4ne]

Самый полезный и понятный контент на тему верстки и js. Огромное спасибо!!! Впервые лайкаю все просмотренные ролики на канале😁

[@plinfa3932]

Как всегда отличный контент. Сразу видно огромную работу проделанную автором. Фразы лаконичные и очень информативно емкие. Примеры заранее продуманные и подготовленные. Звук просто на высоте. А контент просто супер. Нам остается просто впитывать каждую секунду ролика поданную автором как на блюдечке. Большое спасибо за Вашу работу и конечно, же успехов и процветания каналу и школе!

[@sergeychaus3028]

Один из лучших!). Таких блогеров про фронтенд на постсоветском пространстве на пальцах одной руки. Столько полезной инфы, весь код можно сказать отточен до идеального состояния по надежности, продуманности и красоте результата. И человек видно хороший. Удачи тебе!)

[@grgvgrgv]

Ахахаха, как в воду глядел, я как раз хотел на днях углубить свои знания в новых единицах ))) Конечно, твой ролик не отменит чтения книги и MDN, но ща на велик и буду смотреть! Твой контент я бы сказал ДА - содержательный, но лично для меня польза его больше в другом - зажигает интерес к теме и мотивирует идти и углублять знания быстрее через книги/доки и, безусловно, практику! :) Ну и шикарная подача контента - очень важно, большая редкость на ютубе.

[@user-hs3cu6yj5u]

Спасибо! Это однозначно один из лучших каналов в русскоговорящем ютьюбе. Интересные темы, доступное изложение, мотивирующая подача. Очень круто!

[@user-nk7qp2cj3o]

Оаоаоаоа у Жеки новое долгожданное видео) Лайк ставлю стразу!

[@alexivanov8239]

Как раз вчера разбирался с responsiv версткой, и тут материал для закрепления от Жеки) Он просто зверь, читает мысли))

[@senyasong1421]

Какой же вы приятный человек ) смотришь ваши видео и так спокойно становится ненадолго в это не спокойное время. Спасибо вам за ваш труд❤️

[@podmeskaliom]

Жека,ты сверхчеловек)На платных курсах такое не показывают.Респектос+лайкич+комментыч ныыыыаааа

[@dimitridoroshko]

Спасибо, Женя! Я ценю ваш труд!

[@deniszplay6880]

Спасибо тебе женя прошел практически весь бесплатный курс по верстке и сверстал 2 начинающего макета для начала но впереди только больше

[@fordjl9811]

Это видео просто чудо! Аж сердце заколотилось)) Выпуск просто бомба спасибо за твои труды!)

[@qwe-rty-]

Привет, Женя, в очередной раз возвращаюсь к твоим урокам спустя некоторое время, а ты, как и всегда, разжевываешь информацию для нас, очень приятно осознавать, что у меня, как и у сотен тысяч людей, появился такой наставник, или даже сенсей. Спасибо тебе огромное!!!❤️

[@DenisZagvozdin]

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

[@similion]

Привет! Спасибо за полезный и крутой урок! 👍 Столкнулся с проблемой в SCSS. Все время выбивало ошибку: Error: There is no module with the namespace "math". Нашёл решение: необходимо в начало scss файла прописать @use 'sass:math'; Может кому поможет это. 😁

[@g_Earth]

Благодарю, помог

[@user-gs6mh2ry1o]

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

[@user-ut5ii2yu6o]

Как всегда информативно и понятно) Благодарю сердечно!

[@vl8224]

Дякую за таке корисне відео. В якийсь момент мій мозок зламався, що вказує на потребу в більшій кількості практики, але однозначно честь і хвала за такий бомбічний контент.

[@alexfadey]

Ваши бесплатные видео лучше большинства платных курсов. Огромное спасибо за ваш труд и с новым годом)

[@user-np9mq5xc7j]

Спасибо за урок! Очень долго ждали!!!

[@user-jo3cd6fc1f]

Мега полезная инфа! Спасибо огромное! Ты лучший🙏

[@user-jk7wf7ts1v]

Вот ты Мощный 😎чувак! Жекич здоровья и сил!

[@FreelancerLifeStyle]

Спасибо!

[@alexanderweba7166]

Огромное спасибо за подробно изложенный материал !!!

[@mahonyaKodit]

Женя! Ты лучший! Часто попадалось это видео, но я пролистывала его, мол чего я в ремах не знаю. А вот много чего! Ютуб был создан для того, чтобы ты делал эти прекрасные уроки! Спасибо за труд 🧡

[@user-bg3hu1oz4y]

Супер важный ролик! Смотрю взахлеб! Спасибо ,Евгений😀

[@whiterhino752]

Хороший урок! Много полезной информации которую я буду использовать.

[@Denik-is6gi]

самое лучшее раскрытие и объяснение темы единиц измерений. Спасибо!!

[@artemartemenkoartem]

Очень круто и полезно! Спасибо за урок!

[@MilenaAdelin2207]

Євген, завдяки твоім урокам я знайшла першу роботу, працюю вже 9 місяців і нажаль не завжди вичатачає часу дивитись твої уроки, але зараз маю зверстати інтернем магазин з 0. Хочу спробувати використовувати rem чи em. От вирішила розібратись в чому різниця між ними) Якщо виникають моменти коли щось нове або коли шось не виходить , я одразу заходжу на твій канал, бо знаю що краще за тебе ніхто не пояснить. Дякую за твою роботу) Мирного неба!!!

[@user-gx4tn7ln9e]

Спасибо за объяснение, чётко, грамотно и с примерами! Супер!

[@Socvetie_by]

Урок супер! И очень вовремя.

[@vassiliymarkov7893]

Спасибо огромное! Никак не мог разобраться со всеми этими em, rem, fr... Одно видео - и все встало понятно! Спасибо!

[@user-ed3gt4dp2j]

Блин. Просто шикарно. Огромная работа проделана! Спасибо. Все просто максимально понятно!

[@user-pt2uz5st7i]

Как всегда, вне конкуренции, огромное спасибо, очередной супер урок

[@alekskotov9660]

Огромное спасибо за крутые уроки 💪!

[@user-dx1mx3fm5s]

Как всегда отличное, очень информативное видео! Спасибо!

[@alexofwallstreet6609]

Как все просто и понятно объяснено! Вы настоящий мастер своего дела, спасибо! 🥰

[@user-qx2fq9jr6f]

Спасибо Вам огромное за отличный урок!

[@anandinidorogomilovamusic2873]

Спасибо огромное за урок! Вы мастерски преподносите материал!

[@artbotguy]

Ооо в видосил залетел комментик отписал. Глубоко поблагодарил Евгения за его труды:) Ещё одно видео! Такими темпами у каждого интересующегося будет достаточное количество инфы на ближайшие 5 лет в плане вëрстки и фронтенд разработки в целом. Спасибо! Лучший!

[@MrDimichZ]

Просто супер. Особенно умилила фраза "я очень волнуюсь" ))

[@kotlancer]

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

[@user-ek5kq2cz6d]

Круто, спасибо за проделанную работу. Было бы круто, если бы появились видео об инструменте разработчика и о необходимых плагинах браузера для верстки.

[@user-dl1jf8vo2q]

отличный учебный материал, каждый момент разобран до мелочей!

[@user-xs8ty9dg5s]

У тебя просто талант к преподаванию!!!!! Очередной лайк!!!!! Очень крутой материал. Огромное спасибо!!!!!

[@FreelancerLifeStyle]

Пожалуйста! Рад что полезно!

[@user-ke2gv6vb9g]

Спасибо за ваши уроки. Недавно посмотрела видео-стрим на котором говорили про ремы. Была информация поставить 10px для html , а для боди1.6 rem. Тогда ничего не надо считать, просто например для 32 px, поставить точку3.2rem . А если заказчик захочет увеличить размер шрифта, то поменять для боди размер на нужное количество пикселей и все автоматически увеличится на этот размер. Мне кажется , так очень удобно и ничего не нужно пересчитывать

[@romanrrv]

Отлично, как всегда! Спасибо!

[@yatut4467]

Спасибо, очень качественный и не побоюсь сказать эксклюзивный контент. Буквально за пару дней до выхода ролика гуглил про использование rem для блоков, но везде была инфа, что это для шрифтов)

[@vladko9623]

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

[@shukonfadah5725]

все ваши виде это лучшее что можно найти на русскоязычном сегменте! Я поддерживаю вас во всём желаю мира и спокойствия вашей стране и семье

[@user-td9rr1ln6n]

Женя, спасибо. Мне везёт, начала разбираться с единицами, а тут видос подвезли. Всё понятно. Лайк

[@joyway2246]

Просто, доступно, интересно!!! Огромное спасибо за вашу работу! Очень приятно слушать и легко воспринимать информацию.

[@lainettplay]

С каждым новым уроком я всё больше замечаю на сколько html и css интересные и необычные. Спасибо Жень за то что делаешь такие полноценные мануалы по обучению . Обучаюсь не так быстро , но усваиваю твой материал достаточно хорошо. Твой контент лучший из всех существующих! 💗

[@user-hk9tv7cr9i]

Огромное Спасибо за Ваш труд!

[@cryptoneophyte]

Освоил верстку почти только лишь благодаря вашему курсу! Спасибо!

[@andreyfrolov2813]

Благодарю за уроки Евгений. вчера только посмотрел урок про полноэкранные блоки , где ты говорил что запишешь видео про единицы измерения и .... вуаля. лайк однозначно!

[@tirozit720]

Дождались контента

[@FreelancerLifeStyle]

Я рад)

[@tirozit720]

@@FreelancerLifeStyle Спасибо за такое видео

[@VasiliyKolpaxidis]

Уже почти 2 года я подписан на канал и всё это время Женя не перестаёт радовать очень очень очень полезной информацией. Если бы я сам это искал и тестил на сайте то скорее всего это заняло бы как минимум 1 день. По этому поводу спасибо большое за информацию и время которое ты мне сохранил.

[@bibik_s_egipta]

Лучший из лучших!Ждем новых уроков!Женя КРАСАВА!!

[@nerusnotfound]

*интересно было. Спасибо друг* 💪

[@user-cm6zv6xe1m]

Спасибо. Очень полезная информация.

[@A_A_A182]

Спасибо за ваши видео, Евгений

[@Lopa_boba]

О, спасибо. Как раз понял, что надо разобраться в этом и тут кстати ролик 🥳

[@FreelancerLifeStyle]

Я рад!

[@ilyalakhno2850]

Всё гениальное просто. Из твоих уст (../методики/монтажа/примеров/ и т.д.) всё просто и гениально))

[@keks_o4162]

Евгений, вы наше всё!

[@frontend_coder]

Спасибо за такие замечательные уроки, Сколько я проходил уроки Верстки, ни где информация так быстро до меня не доходила!

[@evgenika7472]

Как всегда все супер круто. Спасибо!!!

[@vladimirlevin6799]

Класс, Евгений, спасибо!

[@irinakohova682]

спасибо Вам большое, Вы настоящий человек!

[@dmitrygabitov7946]

Я учусь в одной из академий веб разработки, и там очень много твоих видео входят в перечень обязательных к изучению. Так же многие ссылаются на твои матерьялы как на самые достоверные или когда нужно быстро что-то обьяснить. Вобщем, здорово что Ты столько времени уделяешь своему каналу. Конечно это заработок. Но, можно зарабатывать больше на создании сайтов, приложений, интерфейсов чем на канале. Это же не поедание жратвы на камеру или прочяя хрень, как бы то ни было, думаю аудитория значительно меньше чем у говно-контенто делов, которые делают из людей дебилов, но делающих на этом не малые бабки. Меньше на столько, что тебя не возможно упрекнуть в карыстности. Я думаю ты делаешь это, потому что тебе нравиттся помогать другим и ты получаешь от этого наслаждение большее чем те кто жадно разводят людей на деньги и кайфуют от того какие они хитров..анные. Уважуха Дядя Женя!!!

[@246stas]

Остапа понесло) мог бы просто написать «спасибо»)

[@denisvolkov4784]

Тоесть на платном(?) курсе вас заставляют смотреть бесплатные уроки Жеки? Ни в коем случае не в обиду будет сказано, но невольно вспоминается знаменитая фраза Мавроди...

[@user-bs5uh5qy3h]

Да всё это в статьях написанно ! Он только визуально показывает.К примеру взять javascript плейлист у него все поверхностно.Типо чтоб вы начали , а потом ваши проблемы! Собираешь инфу везде сам .

[@dvl1982ify]

Ти вже вивчив Українську?

[@dvl1982ify]

@@Zagubon Зараз в нього весь новий контент тільки Українською. Вчи щоб розуміти.

[@user-bd4lw9hx3s]

Отличное видео! Все очень понятно и интересно! Жду новых уроков)

[@FreelancerLifeStyle]

Я рад!

[@web2905]

Спасибо огромное. Смотрю твой ролик 1 января 2022 года. Очень полезное и понятное видео. Хотел бы также поздравить тебя с новым годом, пожелать чтобы все твои мечты сбылись, здоровья и огромного счастья.

[@user-lk8br8bp4c]

Блин кайфую от подачи) Спасибо за проделанный труд!

[@eugeniotur]

Спасибо Жень, хотелось бы продолжения . На примерах и для адаптивной вёрстки.

[@user-kz5go4mp8w]

Круто, познавательно, полезно) Спасибо)

[@enemate824]

Каждый раз, когда что-то верстаю, думаю, что отлично получилось. Но после очередного просмотренного твоего выпуска, понимаю, что можно было проше и гораздо лучше. Информация, подача, доступность - все на высшем уровне. Спасибо огромное за твой труд! Контент действительно очень полезный и интересный. Желаю успехов и роста во всем!

[@user-us4xy2rx2s]

Мега крутое видео, которое решит кучу головной боли и сэкономит кучу времени!! Большое спасибо!! Есть только 3 проблемы: 1. Нельзя поставить 100 лайков 2. Придется смотреть это видео не один раз 3. Придется сидеть и отрабатывать все на практике, прежде чем использовать в работе Жека ты супер!!!

[@FreelancerLifeStyle]

Пожалуйста!

[@fasciabeautyhealth3623]

вот чесно лайки ставлю редко но ты его заслужил просто огромный респект

[@sulemasulema3366]

Невероятно полезно. Ну и увлекательно!!!

[@frednoby8531]

За SCSS-функции особая благодарность!

[@g_Earth]

Почему у меня не работае функция? Неизвестное свойство math выдаёт

[@slavikdimitrov2536]

Кефир по ляжкам потек от такого видоса. 2 недели искал что то подобное и только сейчас нашел ))

[@user-tk7qv9rv2c]

Казалось, что там сложного, сейчас быстренько посмотрю!!! Придется еще раз смотреть. Смотрела вроде про препроцессоры, но как написать эти функции не поняла. Буду искать еще ролики! Спасибо, большое!

[@SergioUkrAr]

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