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]

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

[@ugenedev]

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

[@FreelancerLifeStyle]

Пожалуйста!

[@aceracer5556]

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

[@sergmalin210]

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

[@svetlanapokrovskaya7798]

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

[@GaponovaT]

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

[@FreelancerLifeStyle]

Пожалуйста!

[@plinfa3932]

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

[@07km]

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

[@FreelancerLifeStyle]

Я рад)

[@internetlift]

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

[@Alina-ep4ne]

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

[@shah7038]

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

[@DrGonzonik]

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

[@senyasong1421]

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

[@fordjl9811]

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

[@alexfadey]

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

[@user-ue7ul6jv6e]

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

[@user-hs3cu6yj5u]

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

[@sergeychaus3028]

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

[@qwe-rty-]

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

[@DenisZagvozdin]

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

[@Kirichenko_Sl]

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

[@alexofwallstreet6609]

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

[@miheyjumanjy8082]

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

[@user-bg3hu1oz4y]

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

[@deniskotov]

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

[@FreelancerLifeStyle]

Пожалуйста!

[@user-pt2uz5st7i]

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

[@Denik-is6gi]

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

[@dimitridoroshko]

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

[@garagem-1937]

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

[@alexivanov8239]

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

[@user-gx4tn7ln9e]

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

[@lainettplay]

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

[@mahonyaKodit]

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

[@grgvgrgv]

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

[@joyway2246]

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

[@VasiliyKolpaxidis]

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

[@user-np9mq5xc7j]

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

[@cryptoneophyte]

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

[@user-nk7qp2cj3o]

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

[@vassiliymarkov7893]

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

[@andreyfrolov2813]

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

[@user-ed3gt4dp2j]

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

[@user-jo3cd6fc1f]

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

[@vladko9623]

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

[@Faradenza-sb3mj]

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

[@yatut4467]

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

[@user-ut5ii2yu6o]

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

[@Lopa_boba]

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

[@FreelancerLifeStyle]

Я рад!

[@alexanderweba7166]

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

[@web2905]

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

[@enemate824]

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

[@frontend_coder]

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

[@user-xs8ty9dg5s]

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

[@FreelancerLifeStyle]

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

[@Socvetie_by]

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

[@vl8224]

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

[@ilyalakhno2850]

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

[@artbotguy]

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

[@alekskotov9660]

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

[@MrDimichZ]

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

[@keks_o4162]

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

[@kotlancer]

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

[@artemartemenkoartem]

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

[@A_A_A182]

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

[@user-qx2fq9jr6f]

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

[@user-td9rr1ln6n]

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

[@bibik_s_egipta]

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

[@deniszplay6880]

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

[@anandinidorogomilovamusic2873]

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

[@user-ek5kq2cz6d]

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

[@user-hk9tv7cr9i]

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

[@user-dl1jf8vo2q]

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

[@whiterhino752]

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

[@user-dx1mx3fm5s]

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

[@romanrrv]

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

[@dmitrygabitov7946]

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

[@246stas]

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

[@denisvolkov4784]

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

[@user-bs5uh5qy3h]

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

[@dvl1982ify]

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

[@dvl1982ify]

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

[@user-lk8br8bp4c]

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

[@frednoby8531]

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

[@g_Earth]

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

[@adilbek.ermekov]

Ох, наконец-то. Спасибо!

[@user-ke2gv6vb9g]

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

[@irinakohova682]

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

[@podmeskaliom]

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

[@tirozit720]

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

[@FreelancerLifeStyle]

Я рад)

[@tirozit720]

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

[@user-cm6zv6xe1m]

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

[@vladimirlevin6799]

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

[@maximpolsky2683]

Мужик, ты шикарен!

[@user-jg8ey4bh4b]

Мастер своего дела. Молодец.

[@evgenika7472]

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

[@user-bd4lw9hx3s]

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

[@FreelancerLifeStyle]

Я рад!

[@sulemasulema3366]

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

[@FradPR]

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

[@veaceslavcobelev3943]

Урааааааааа ! очень актуальный выпуск

[@nerusnotfound]

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

[@tatianadmitrieva6712]

Жека, Велике спасибі за цей урок, пояснив складні речі простими словами! 👍

[@farhad5066]

Так грамотно и доходчиво объяснил, спасибо.👍

[@FreelancerLifeStyle]

Пожалуйста!

[@user-kz5go4mp8w]

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

[@yaroslavkelemen3647]

Как раз то что нужно! Большое спасибо!

[@FreelancerLifeStyle]

Пожалуйста!

[@pavlorozhko1342]

Вторая половина видео - огонь!!!

[@user-ty4rf1sk7u]

Лайк не глядя! Давно ждем)

[@FreelancerLifeStyle]

Спасибо!

[@developsoft5561]

Видео офигенное, действительно вносит ясность что и зачем используется. Минимум времени - максимум результата. Конечно придется переделывать свой "*авно-код"... мда, но лучше поздно чем никогда )))