PX, EM, REM - Единицы измерения в CSS

[@arrov1980]

1) Объяснил чем отличается 2) Объяснил когда использовать Храни тебя бог адаптива

[@MrMaTizFeeD]

Единственное нормальное видео про единицы измерения в топе Ютуба. Спасибо, Дмитрий

[@ЕкатеринаКутовая]

Так доходчиво объяснить сабж за 15 минут - это круто!

[@РусланРастегаев-з1э]

Можно придерживаться такой стратегии. Для html установить размер шрифта в em. Дальше использовать rem только для шрифтов, em для отступов, px для границ. В этом случае размер шрифта всех элементов будет относительно html { font-size: 1em; } Соответственно отступы в em будут относительно размера шрифта своего блока, который относителен от html { font-size: 1em; }. За видео спасибо)

[@BrainsCloud]

Друзья, меня не будет чуть больше недели, до 12 октября этого года. Так что не теряйте! 12 октября начну записывать новый материал. На связи!

[@BrainsCloud]

Вэннос Crossfire RU хаха)) спасибо 😄

[@BrainsCloud]

Вэннос Crossfire RU окей, возможно такое будет )

[@ОлегЕ-и7х]

Тема раскрыта благодаря отличным примерам. Большое спасибо!

[@СергейОленичев-к3з]

Ты бог наглядного объяснения, это моё 5е видео и только сейчас всё понял

[@olehhavrylenko507]

Дякую, мужик. Все доступно пояснив

[@grabdmitry]

Спасибо! Все понятно и наглядно. command+shift+backspace - очищает корзину без подтверждения

[@АлексейЗахарченко-о8с]

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

[@tilekabylesov3929]

Максимально доступное пояснение !

[@soraxsorax2535]

Столько нужной информации. Спасибо. Подписка

[@tlegenbayangali]

долго не мог понять суть работы в данных еи. за 15 минут твоего урока все осознал. спасибо!

[@defix_gamedev]

Мужик, спасибо!!!

[@maximpanfilov5931]

Спасибо за наглядные примеры

[@pogrebnoimaksim]

Немного неверное пояснение единицы EM и REM, по вашему примеру я как понял что .title и .text находятся внутри .container, а .container в свою очередь уже в body, так вот, единица EM работает относительно родительского элемента, то есть для .title и .text родителем будет .container, значит для них значение размера шрифта будет высчитываться относительно .container, а не как в вашем примере вы указали на body. Далее по REM, единица работает относительно корневого элемента документа, это вы верно озвучили, НО для документа корневой элемент не BODY как в вашем примере, а HTML, если бы вы пробовали менять размер шрифта в BODY, то заметили бы что у элементов с прописанным размером шрифта через REM никаких изменений не было бы, а в вашем примере эти элементы брали за базовый размер 16px, якобы от BODY, нет, он брался от HTML, хоть этот размер и не прописан в стилях но браузеры в основном по умолчанию ставят размер шрифта 16px для HTML, просто совпадение))

[@justspartak]

Разве REM работает не относительно размера шрифта устанавливаемого стиля браузером? Т.е. это величина размера шрифта, что определяется в настройках браузера. В разных браузерах по разному, но обычно - это те же 16 пикселей.

[@zMrSPaRk]

в последнем примере забыл указать на html но когда объяснял про ремы говорил про то что надо указать на html

[@podreju2500]

Дмитрий, спасибо Давно хотел расставить все точки над "И" в этой теме, теперь мне все понятно

[@BrainsCloud]

Отлично!

[@technic_and_programming]

Лучший!

[@MV-bo1bd]

спасибо за полезную информацию ! Ставлю лайк за труд !

[@ЛобовДенис]

Спасибо за тему с 2.42 мин ролика. Разобрался

[@Faradenza-sb3mj]

Спасибо за очень интересную подачу!

[@Dan-p7f]

Благодарю, всё очень понятно

[@justspartak]

Спасибо большое! Шикарный урок.

[@Viktorres1]

Фух! Спасибо! Просветили. Нужны были rem, но теперь и насчет em задумываюсь.

[@John0906]

Спасибо!

[@alexdreamer11]

Круто и доступно объяснил 👍💪

[@Tribunall]

Спасибо за внятное обьяснение

[@НиколайТакой-р6ъ]

Видос классный, но хотелось бы уточнить: em и rem вычисляются исключительно относительно размера ШРИФТА или его как-то можно связать с размером любого контента внутри (будь то изображение, или другой элемент). Заранее спасибо!

[@РоманДолматов-и3ъ]

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

[@stanislav5846]

Спасибо. Все круто и Понятно

[@Expertdog]

Отличное видео! Хорошо что нашел! Расскажите также подробно про clamp в CSS

[@progerlife6690]

ОО чисто случайно нашел видос на ютубе))Зашел и услышал Димона.Лайк))Только я для адаптации использую еще vmin vmax.))

[@scren2010]

Ещё один отличный урок лайк, подписка.

[@BrainsCloud]

💪

[@demyanmoysov9870]

спасибо, полезно и понятно

[@denispaverin4584]

Топовый просто!!!!!!

[@BeLKa4444]

Отличное видео!

[@Mishawitcher]

позновательное видео, спасибо!)

[@mokkamokka4097]

ну просто от души!

[@vladimirsergeevich8450]

Круто, продолжай в том же духе.

[@denys_pits]

Уважаемый автор, мне этот урок был полезным и я научился понимать применение этих единиц, относительно случая. Но возник вопрос, для адаптивном верстки можно все значения прописывать в em/rem? Просто хотелось бы понять, в каких случаях нужно использовать именно px, если единицы из урока такие из себя хороши

[@andrejskomorkovics3177]

После просмотра 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

[@addlokkesself4239]

Получается для каждого тега в цсс нужно писать размер в 'em'? И если в том же теге меняется font-size на размеры в 'em', то уже относительно тех размеров, которые указаны именно в этом теге? Запутано, rem понятнее)

[@demyanmoysov9870]

было бы здорово записать видос про gulp, а именно как работает твоя сборка, детальненько конечно)) спасибо)

[@BrainsCloud]

Dema Moy запишу как нибудь

[@demyanmoysov9870]

буду ждать, очень интересно , спасибо за канал

[@BrainsCloud]

💪

[@Levelord92]

Всё круто и познавательно, но вот типа 2:55 нафига всё это? Мне постоянно нужно чекать, не задаёт ли какое ещё правило в этом классе размер через em, чтобы поставить то, что я хочу? px независим в этом плане

[@SergiuBurduja-y1l]

Спасибо, для меня эта была запутанная тема, теперь вроде немного прояснилось. Я подразумеваю, что rem и em используются и для адаптивной верстки? Очень бы хотелось посмотреть как ты верстаешь небольшой, но сложный сайт. Я думаю, что у тебя есть чему поучиться. Спасибо тебе и удачи.

[@BrainsCloud]

На здоровье! Как бы в 2017 адаптивный сайт это не что-то отдельное, а само собой разумеющиеся для любого сайта, я так считаю, поэтому можно ответить да. Будет такой курс, только пока не знаю когда, пока дел много, уже 3 недели ничего не записывал :(

[@AlexAlex-sh3mz]

Здравствуйте, хотел спросить, если к примеру в боди шрифт 16 пикс увеличить на 18, тогда все нужно умножать на 18?

[@AlekMuz]

👍

[@AndriiNakonechnyi-f3y]

Топ

[@para6epc]

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

[@BrainsCloud]

Честно, не пробовал делать вертикальные отступы в %. Мне вполне хватает px, em, rem и не было случаев необходимости отступов в %. Можете привести пример где это необходимо?

[@para6epc]

Например, любой + - стандартный лендинг. В каждой секции есть отступы сверху и снизу, в процессе адаптации нет особо необходимости менять эти отступы(или необходимость возникает, может 1 раз) если они заданы в % так как они считаются от ширины окна.

[@BrainsCloud]

Dima Tar опять же тут проще использовать не проценты и поменять отступы одним медиа запросом. Я так делаю

[@КонстантинБожеев]

10 лет верстаю, и ни когда не использовал. А зря :)

[@aliciajc4985]

что-то не могу понять почему в title .5em это 16px, а не половина от 16 когда 2em = 32px

[@wildtube108]

Не понятно почему 32 px это 2еm, 16 px это 0.5em???🤔🤔🤔🤔

[@-Forever-Young-]

Пересмотри. Все доходчиво поясняет.

[@enderhexfyreeve1900]

не проще ли юзать препроцессоры и переменные для таких целей?

[@BrainsCloud]

Это то тут причем? Урок про единицы измерения, чтобы их понимать, а юзать препроцессоры или не юзать, это уже другое.

[@enderhexfyreeve1900]

@@BrainsCloud так я и не говорю что EM бесполезны, или что вы что-то неправильно делаете. я думаю что есть альтернативный способ быстро задать "масштаб с пропорциями" кнопки используя препроцессоры и переменные(ведь почти все используют препроцессоры). вот поэтому и спрашиваю ваше мнение о том как бы вы стали делать, надо ли делать REM-EM или же подобные задачи надо решать препроцессорами(что лично мне кажется тоже самым, только в явном виде, да еще и куча доп удобств сверху)? еще возможно есть какие-то уникальные особенности EM и REM, что могут сильно отличаться от банальной переменной препроцессора. по сути ведь задав в HTML один раз размер шрифта мы по сути задаем одну единственную переменную к которой привязываемся. я правильно понял суть или что-то все-таки отличается и это отличие можно в явном виде использоваться. но я думаю что ничего напрасно в программировании не делают, вот и хотел бы увидеть демонстрацию этого.

[@BrainsCloud]

@@enderhexfyreeve1900 используйте препроцессоры и ремы с емами, одно другому не мешает. Я же показал пример с кнопками, зачем там еще какие-то вычисления? Прописал один раз пропорцию и все.

[@logand5408]

Ну да конечно, чувствую, буду в этом путаться в будущем.

[@turtrueweb]

Задавать размер шрифта для HTML не очень хорошая идея, таким образом мы перебиваем размер пользовательских настроек шрифта в браузере.

[@ImpulseYou]

Уроки Ajax будут?

[@BrainsCloud]

Будут, не все сразу )

[@ImpulseYou]

Будет когда я его буду уже сам на ура знать) Просто мало норм русскоязычных видео по Ajax

[@BrainsCloud]

Так это же хорошо. Запишу уроки - закрепите материал )

[@nikolaydd6219]

Зачем тебе нужен брекет если есть саблайм?

[@shama9662]

php будет**?

[@BrainsCloud]

Возможно

[@ВладиславДидковский-м1м]

ахахах, умная корзина однако :)

[@iloginu]

Честно говоря, не понял чем отличаются емы от ремов.

[@nangelo0]

мама пошла мусор выносить

[@daniyarzhanakhmetov7741]

Спасибо!