CSS EM REM и прочие единицы измерения CSS. Что когда использовать? Подробное объяснение на практике.
Вставка
- Опубліковано 25 чер 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 ) Спасибо больше за ваш труд!
Пожалуйста!
Привет, Женя, в очередной раз возвращаюсь к твоим урокам спустя некоторое время, а ты, как и всегда, разжевываешь информацию для нас, очень приятно осознавать, что у меня, как и у сотен тысяч людей, появился такой наставник, или даже сенсей.
Спасибо тебе огромное!!!❤️
все ваши виде это лучшее что можно найти на русскоязычном сегменте! Я поддерживаю вас во всём желаю мира и спокойствия вашей стране и семье
Мне кажется все давно ждали этого урока )) Совместить со знаниями резиновой верстки и будет огонь! Спасибо тебе добрый человек!
Посмотрела подпись к ролику, подумала, что да, интересно, нужно посмотреть. Но я не ожидала, что мне придется пересматривать этот ролик три раза, столько нюансов! Огромное спасибо за труд, за знания, которыми вы делитесь.
Как всегда отличный контент. Сразу видно огромную работу проделанную автором. Фразы лаконичные и очень информативно емкие. Примеры заранее продуманные и подготовленные. Звук просто на высоте. А контент просто супер. Нам остается просто впитывать каждую секунду ролика поданную автором как на блюдечке. Большое спасибо за Вашу работу и конечно, же успехов и процветания каналу и школе!
ОБЬЯСНЕНИЯ, КАК ВСЕГДА НА ВЫСОТЕ !!! лучший учитель-блогер , которого я нашел. Ничего лишнего , все разжевано , практически все понятно . ЛУЧШИЙ !!! Спасибо за бесплатный огромный доступный труд !!!!!!!
Каждый новый урок от тебя делает мой день, спасибо, ты крут)💖
Пожалуйста!
Таким и должно быть обучающее видео, никакой воды, все четко и по существу. Объяснение грамотное, с хорошей дикцией и все понятно. Очень благодарен, подписался)
Самый полезный и понятный контент на тему верстки и js. Огромное спасибо!!!
Впервые лайкаю все просмотренные ролики на канале😁
Спасибо за ваши видео, Евгений
Огромное спасибо за подробно изложенный материал !!!
Как всегда информативно и понятно) Благодарю сердечно!
Довго не розумів,чому і навіщо використовують ці Em та Rem,та завдяки Вам,всеж-таки зрозумів,а ці лайфхаки - скарб,дякую за працю!!!
Мега полезная инфа! Спасибо огромное! Ты лучший🙏
Видео офигенное, действительно вносит ясность что и зачем используется. Минимум времени - максимум результата. Конечно придется переделывать свой "*авно-код"... мда, но лучше поздно чем никогда )))
Лайк не глядя, вчера только начал изучать единицы измерения, и тут выходит урок от Евгения 👍👍👍
Я рад)
Евгений, вы наше всё!
Лучший из лучших!Ждем новых уроков!Женя КРАСАВА!!
Найкраще та найдетальніше відео з поясненням про одиниці вімірювання в ютубі 👍🏻
У вас курсы круче чем платные!.
Спасибо за объяснение, чётко, грамотно и с примерами! Супер!
Ооо в видосил залетел комментик отписал. Глубоко поблагодарил Евгения за его труды:)
Ещё одно видео!
Такими темпами у каждого интересующегося будет достаточное количество инфы на ближайшие 5 лет в плане вëрстки и фронтенд разработки в целом. Спасибо! Лучший!
Урок супер! И очень вовремя.
Женя, спасибо. Мне везёт, начала разбираться с единицами, а тут видос подвезли. Всё понятно. Лайк
Ох, наконец-то. Спасибо!
Великолепно! Как раз у меня в задачах было освежить знания по единицам измерения. Спасибо огромное.
Блин. Просто шикарно. Огромная работа проделана! Спасибо. Все просто максимально понятно!
Спасибо! Это однозначно один из лучших каналов в русскоговорящем ютьюбе. Интересные темы, доступное изложение, мотивирующая подача. Очень круто!
Спасибо огромное за урок! Вы мастерски преподносите материал!
Оххх, столько материала за раз не переваришь)) Очень круто, очень полезно, ждем новую версию шаблона и по полной погружаемся в относительные единицы!)
Огромное спасибо!
Это видео просто чудо! Аж сердце заколотилось)) Выпуск просто бомба спасибо за твои труды!)
Огромное спасибо за крутые уроки 💪!
Огромное Спасибо за Ваш труд!
Спасибо тебе женя прошел практически весь бесплатный курс по верстке и сверстал 2 начинающего макета для начала но впереди только больше
Спасибо Вам огромное за отличный урок!
Очень круто и полезно! Спасибо за урок!
Отлично, как всегда!
Спасибо!
Урааааааааа ! очень актуальный выпуск
Освоил верстку почти только лишь благодаря вашему курсу! Спасибо!
Хороший урок! Много полезной информации которую я буду использовать.
Просто супер. Особенно умилила фраза "я очень волнуюсь" ))
Мужик, ты шикарен!
Как все просто и понятно объяснено! Вы настоящий мастер своего дела, спасибо! 🥰
Как всегда отличное, очень информативное видео! Спасибо!
Класс, Евгений, спасибо!
Спасибо, очень качественный и не побоюсь сказать эксклюзивный контент. Буквально за пару дней до выхода ролика гуглил про использование rem для блоков, но везде была инфа, что это для шрифтов)
Мастер своего дела. Молодец.
Один из лучших!). Таких блогеров про фронтенд на постсоветском пространстве на пальцах одной руки. Столько полезной инфы, весь код можно сказать отточен до идеального состояния по надежности, продуманности и красоте результата. И человек видно хороший. Удачи тебе!)
За SCSS-функции особая благодарность!
Почему у меня не работае функция? Неизвестное свойство math выдаёт
Просто, доступно, интересно!!! Огромное спасибо за вашу работу! Очень приятно слушать и легко воспринимать информацию.
отличный учебный материал, каждый момент разобран до мелочей!
Уровень преподавания растет от урока к уроку. Обучаться с такими видео намного легче и продуктивнее, чем самому. Спасибо за качественный контент!
Всё гениальное просто. Из твоих уст (../методики/монтажа/примеров/ и т.д.) всё просто и гениально))
Спасибо за такие замечательные уроки, Сколько я проходил уроки Верстки, ни где информация так быстро до меня не доходила!
Блин кайфую от подачи) Спасибо за проделанный труд!
Благодарю за уроки Евгений. вчера только посмотрел урок про полноэкранные блоки , где ты говорил что запишешь видео про единицы измерения и .... вуаля. лайк однозначно!
Ахахаха, как в воду глядел, я как раз хотел на днях углубить свои знания в новых единицах ))) Конечно, твой ролик не отменит чтения книги и MDN, но ща на велик и буду смотреть! Твой контент я бы сказал ДА - содержательный, но лично для меня польза его больше в другом - зажигает интерес к теме и мотивирует идти и углублять знания быстрее через книги/доки и, безусловно, практику! :) Ну и шикарная подача контента - очень важно, большая редкость на ютубе.
спасибо Вам большое, Вы настоящий человек!
Оаоаоаоа у Жеки новое долгожданное видео) Лайк ставлю стразу!
Спасибо огромное! Никак не мог разобраться со всеми этими em, rem, fr... Одно видео - и все встало понятно! Спасибо!
Каждый раз, когда что-то верстаю, думаю, что отлично получилось. Но после очередного просмотренного твоего выпуска, понимаю, что можно было проше и гораздо лучше. Информация, подача, доступность - все на высшем уровне. Спасибо огромное за твой труд! Контент действительно очень полезный и интересный. Желаю успехов и роста во всем!
Спасибо огромное. Смотрю твой ролик 1 января 2022 года. Очень полезное и понятное видео. Хотел бы также поздравить тебя с новым годом, пожелать чтобы все твои мечты сбылись, здоровья и огромного счастья.
Спасибо. Очень полезная информация.
Лайк не глядя!
Давно ждем)
Спасибо!
Ваши бесплатные видео лучше большинства платных курсов. Огромное спасибо за ваш труд и с новым годом)
Дождались контента
Я рад)
@@FreelancerLifeStyle Спасибо за такое видео
Как всегда все супер круто. Спасибо!!!
*интересно было. Спасибо друг* 💪
Как раз вчера разбирался с responsiv версткой, и тут материал для закрепления от Жеки) Он просто зверь, читает мысли))
О, спасибо. Как раз понял, что надо разобраться в этом и тут кстати ролик 🥳
Я рад!
Ну вот и вспомнил CSS и HTML по этому замечательному плейлисту. Всё структурировано, лаконично, понятно. Конечно это далеко не весь CSS но тут вся основа, для того чтобы двигаться дальше. Большое спасибо за труд. *Лайки ставить не забывал)))
Спасибо за твои труды)) видео очень качественное и полезное!
Мне казалось, верстая 2 года, я всё знаю об единицах измерения, но это не так... В этом видео я узнал некоторые новые вещи для себя. Ещё раз спасибо :)
Вторая половина видео - огонь!!!
Круто, познавательно, полезно)
Спасибо)
Невероятно полезно. Ну и увлекательно!!!
спасибо! смотрю смотрел и буду смотреть
Как раз то что нужно! Большое спасибо!
Пожалуйста!
Жека, Велике спасибі за цей урок, пояснив складні речі простими словами! 👍
Так грамотно и доходчиво объяснил, спасибо.👍
Пожалуйста!
Чудовий гайд!
Шикарный материал!
Отличное видео! Все очень понятно и интересно! Жду новых уроков)
Я рад!
Чудовий урок!
Жека,ты сверхчеловек)На платных курсах такое не показывают.Респектос+лайкич+комментыч ныыыыаааа
Спасибо за ваши уроки. Недавно посмотрела видео-стрим на котором говорили про ремы. Была информация поставить 10px для html , а для боди1.6 rem. Тогда ничего не надо считать, просто например для 32 px, поставить точку3.2rem . А если заказчик захочет увеличить размер шрифта, то поменять для боди размер на нужное количество пикселей и все автоматически увеличится на этот размер.
Мне кажется , так очень удобно и ничего не нужно пересчитывать
Женя! Ты лучший!
Часто попадалось это видео, но я пролистывала его, мол чего я в ремах не знаю. А вот много чего!
Ютуб был создан для того, чтобы ты делал эти прекрасные уроки! Спасибо за труд 🧡
Как всегда все шикарно и понятно)
Круто, спасибо большое!
Крутяк, супер, так все разложил, красава), спасибо, честно до этого для меня это была каробка пандоры.
Хоть и работаю с этими всеми единицами, но почерпнул прилично)) спасибо)
Thanks for your video!
Очень интересно, спасибо за труд
Круто, спасибо за проделанную работу. Было бы круто, если бы появились видео об инструменте разработчика и о необходимых плагинах браузера для верстки.
Спасибо Жень, хотелось бы продолжения . На примерах и для адаптивной вёрстки.
........Четко, классно, в натуре классно, умеете, могёте......!)
Лайк не глядя. Все что от Фрилансера по жизни - безкомпромиссная годнота
Какой же вы приятный человек ) смотришь ваши видео и так спокойно становится ненадолго в это не спокойное время. Спасибо вам за ваш труд❤️