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