PX, EM, REM - Единицы измерения в CSS
HTML-код
- Опубликовано: 29 сен 2024
- В этом видео разберем что же такое em и rem, чем они отличаются и покажу несколько примеров использования этих единиц измерения CSS.
Сайт автора: brainscloud.ru/
Файлы урока: files.brainscl...
#верстка #html #css #css3
Так доходчиво объяснить сабж за 15 минут - это круто!
1) Объяснил чем отличается
2) Объяснил когда использовать
Храни тебя бог адаптива
Спасибо большое! Шикарный урок.
Круто, продолжай в том же духе.
что-то не могу понять почему в title .5em это 16px, а не половина от 16 когда 2em = 32px
Задавать размер шрифта для HTML не очень хорошая идея, таким образом мы перебиваем размер пользовательских настроек шрифта в браузере.
Единственное нормальное видео про единицы измерения в топе Ютуба. Спасибо, Дмитрий
Можно придерживаться такой стратегии.
Для html установить размер шрифта в em.
Дальше использовать rem только для шрифтов, em для отступов, px для границ.
В этом случае размер шрифта всех элементов будет относительно html { font-size: 1em; }
Соответственно отступы в em будут относительно размера шрифта своего блока, который относителен от html { font-size: 1em; }.
За видео спасибо)
Друзья, меня не будет чуть больше недели, до 12 октября этого года. Так что не теряйте! 12 октября начну записывать новый материал. На связи!
Вэннос Crossfire RU хаха)) спасибо 😄
Вэннос Crossfire RU окей, возможно такое будет )
Немного неверное пояснение единицы EM и REM, по вашему примеру я как понял что .title и .text находятся внутри .container, а .container в свою очередь уже в body, так вот, единица EM работает относительно родительского элемента, то есть для .title и .text родителем будет .container, значит для них значение размера шрифта будет высчитываться относительно .container, а не как в вашем примере вы указали на body. Далее по REM, единица работает относительно корневого элемента документа, это вы верно озвучили, НО для документа корневой элемент не BODY как в вашем примере, а HTML, если бы вы пробовали менять размер шрифта в BODY, то заметили бы что у элементов с прописанным размером шрифта через REM никаких изменений не было бы, а в вашем примере эти элементы брали за базовый размер 16px, якобы от BODY, нет, он брался от HTML, хоть этот размер и не прописан в стилях но браузеры в основном по умолчанию ставят размер шрифта 16px для HTML, просто совпадение))
Разве REM работает не относительно размера шрифта устанавливаемого стиля браузером? Т.е. это величина размера шрифта, что определяется в настройках браузера. В разных браузерах по разному, но обычно - это те же 16 пикселей.
в последнем примере забыл указать на html но когда объяснял про ремы говорил про то что надо указать на html
Спасибо! Все понятно и наглядно.
command+shift+backspace - очищает корзину без подтверждения
Тема раскрыта благодаря отличным примерам. Большое спасибо!
Не понятно почему 32 px это 2еm, 16 px это 0.5em???🤔🤔🤔🤔
Пересмотри. Все доходчиво поясняет.
Всё круто и познавательно, но вот типа 2:55 нафига всё это?
Мне постоянно нужно чекать, не задаёт ли какое ещё правило в этом классе размер через em, чтобы поставить то, что я хочу? px независим в этом плане
После просмотра 15мин видео потом еще минут 20 пытался понять историю про 2em = 32px, а 0.5em = 16px. Вроде понял и немного яснее становится, когда как бы добавляешь еще одно действие, а не просто мыслишь в пределах "в 2 раза больше / в 2 раза меньше"
1) 2em = 32px,
2) все, после этого про 2em мы как бы забываем, классу .title мы теперь задали конкретный размер шрифта 32 px и это теперь и есть наш 1em, который определяет размер шрифта всему, что есть в этом классе (про body мы забываем).
3) И теперь уже, чтобы получить 16px от 32рх(которые теперь как 1em) мы 1 делим на 2 и получаем 0.5em
Лучший!
Ты бог наглядного объяснения, это моё 5е видео и только сейчас всё понял
Видос классный, но хотелось бы уточнить: em и rem вычисляются исключительно относительно размера ШРИФТА или его как-то можно связать с размером любого контента внутри (будь то изображение, или другой элемент). Заранее спасибо!
Дякую, мужик. Все доступно пояснив
Спасибо за тему с 2.42 мин ролика. Разобрался
Получается для каждого тега в цсс нужно писать размер в 'em'? И если в том же теге меняется font-size на размеры в 'em', то уже относительно тех размеров, которые указаны именно в этом теге? Запутано, rem понятнее)
Ну да конечно, чувствую, буду в этом путаться в будущем.
Честно говоря, не понял чем отличаются емы от ремов.
Зачем тебе нужен брекет если есть саблайм?
Мужик, спасибо!!!
10 лет верстаю, и ни когда не использовал. А зря :)
ОО чисто случайно нашел видос на ютубе))Зашел и услышал Димона.Лайк))Только я для адаптации использую еще vmin vmax.))
Здравствуйте, хотел спросить, если к примеру в боди шрифт 16 пикс увеличить на 18, тогда все нужно умножать на 18?
Фух! Спасибо! Просветили. Нужны были rem, но теперь и насчет em задумываюсь.
Уважаемый автор, мне этот урок был полезным и я научился понимать применение этих единиц, относительно случая. Но возник вопрос, для адаптивном верстки можно все значения прописывать в em/rem? Просто хотелось бы понять, в каких случаях нужно использовать именно px, если единицы из урока такие из себя хороши
👍
Дмитрий, спасибо
Давно хотел расставить все точки над "И" в этой теме, теперь мне все понятно
Отлично!
Максимально доступное пояснение !
Топ
Топовый просто!!!!!!
Столько нужной информации. Спасибо. Подписка
Спасибо!
Спасибо!
Благодарю, всё очень понятно
Спасибо за наглядные примеры
Спасибо, очень понятно, уже несколько других видео посмотрел, но без примеров, хотя бы даже таких простых было непонятно зачем оно надо.
Спасибо, для меня эта была запутанная тема, теперь вроде немного прояснилось. Я подразумеваю, что rem и em используются и для адаптивной верстки? Очень бы хотелось посмотреть как ты верстаешь небольшой, но сложный сайт. Я думаю, что у тебя есть чему поучиться. Спасибо тебе и удачи.
На здоровье! Как бы в 2017 адаптивный сайт это не что-то отдельное, а само собой разумеющиеся для любого сайта, я так считаю, поэтому можно ответить да. Будет такой курс, только пока не знаю когда, пока дел много, уже 3 недели ничего не записывал :(
Спасибо. Все круто и Понятно
мама пошла мусор выносить
позновательное видео, спасибо!)
Отличное видео! Хорошо что нашел! Расскажите также подробно про clamp в CSS
Спасибо за внятное обьяснение
ахахах, умная корзина однако :)
Отличное видео!
ну просто от души!
спасибо, полезно и понятно
спасибо за полезную информацию ! Ставлю лайк за труд !
долго не мог понять суть работы в данных еи. за 15 минут твоего урока все осознал. спасибо!
Ещё один отличный урок лайк, подписка.
💪
Спасибо за очень интересную подачу!
Спасибо! Очень интересный и полезный контент )
Уважаемый автор, как на ваш взгляд, удобнее или нет использовать для отступов вертикальных процентаж? Особенно в адаптивной верстке. Спасибо
Честно, не пробовал делать вертикальные отступы в %. Мне вполне хватает px, em, rem и не было случаев необходимости отступов в %. Можете привести пример где это необходимо?
Например, любой + - стандартный лендинг. В каждой секции есть отступы сверху и снизу, в процессе адаптации нет особо необходимости менять эти отступы(или необходимость возникает, может 1 раз) если они заданы в % так как они считаются от ширины окна.
Dima Tar опять же тут проще использовать не проценты и поменять отступы одним медиа запросом. Я так делаю
Уроки Ajax будут?
Будут, не все сразу )
Будет когда я его буду уже сам на ура знать) Просто мало норм русскоязычных видео по Ajax
Так это же хорошо. Запишу уроки - закрепите материал )
было бы здорово записать видос про gulp, а именно как работает твоя сборка, детальненько конечно)) спасибо)
Dema Moy запишу как нибудь
буду ждать, очень интересно , спасибо за канал
💪
не проще ли юзать препроцессоры и переменные для таких целей?
Это то тут причем? Урок про единицы измерения, чтобы их понимать, а юзать препроцессоры или не юзать, это уже другое.
@@BrainsCloud так я и не говорю что EM бесполезны, или что вы что-то неправильно делаете. я думаю что есть альтернативный способ быстро задать "масштаб с пропорциями" кнопки используя препроцессоры и переменные(ведь почти все используют препроцессоры). вот поэтому и спрашиваю ваше мнение о том как бы вы стали делать, надо ли делать REM-EM или же подобные задачи надо решать препроцессорами(что лично мне кажется тоже самым, только в явном виде, да еще и куча доп удобств сверху)? еще возможно есть какие-то уникальные особенности EM и REM, что могут сильно отличаться от банальной переменной препроцессора. по сути ведь задав в HTML один раз размер шрифта мы по сути задаем одну единственную переменную к которой привязываемся. я правильно понял суть или что-то все-таки отличается и это отличие можно в явном виде использоваться. но я думаю что ничего напрасно в программировании не делают, вот и хотел бы увидеть демонстрацию этого.
@@enderhexfyreeve1900 используйте препроцессоры и ремы с емами, одно другому не мешает. Я же показал пример с кнопками, зачем там еще какие-то вычисления? Прописал один раз пропорцию и все.
Круто и доступно объяснил 👍💪
php будет**?
Возможно