CSS units for font-size: px, %, em, rem, vw, vh, vmin, vmax
ฝัง
- เผยแพร่เมื่อ 2 เม.ย. 2019
- Visual aid on working with units CSS for font-size: px, %, em, rem, vw, vh, vmin, vmax.
Examples:
- codepen.io/anna_blok/pen/LvVgOq
- codepen.io/anna_blok/pen/bJdQXm
- codepen.io/anna_blok/pen/LvpQmX
- codepen.io/anna_blok/pen/BEoYPo
- codepen.io/anna_blok/pen/ROWyoj
______________
Buy Frontend Book - tpverstak.ru/frontendbook
Ask a question for free - frontendhelp.me/ru
______________
Website - tpverstak.ru
VK - tpverstak
Instagram - / tpverstak
Telegram - t.me/tpverstak и t.me/annbloknote
Telegram Chat - t.me/tpverstakchat
______________
Course "Super Start" - tpverstak.ru/super-start/
Feedback - topic-149247708_36129364
Basic course - tpverstak.ru/training/
Advanced course - tpverstak.ru/training-profi/
Feedback - topic-149247708_35960122
Ура! Ждал нового видео с нетерпением! Спасибо, Анна :) добра Вам!
Спасибо 😊
Анна спасибо большое, прошу вас не останавливайтесь мы ждет от вас помощи и объяснений в разных темах, спасибо что вы есть и помогаите нам) еще раз большое спасибо ваш труд очень важен для нас
Спасибо 😊
Видео супер! Спасибо, Анна!
Анна, какая вы умница, спасибо вам большое за все эти уроки
☺️
Всегда использую при мобильной верстке vmin, и vmax. Спасибо за труды. Жду новые видео) Лайк)
Отлично и доходчиво, благодарю, стал лучше понимать в em и rem, давно хотел перейти на эти единицы)
😊
Анна, спасибо за прекрасный разбор! Мне очень помогло!
умница, нет воды и все по делу рассказала
Благодарю Вас за видео.
Аня, спасибо за труды!
Дополню, что можно задать:
html {font-size: 62.5%;}
body {font-size: 1.4rem;} //если нужен дефолтный нормальный размер
ну а дальше в нужных местах отталкиваться от 62.5% (он же 10px) и всё будет норм.... при этом, если необходимо будет масштабировать все размеры шрифтов, то надо будет только изменить размер в селекторе html, остальное подтянется пропорционально... ну это я так, объяснил немного по-другому для тех, кто не понял :)
задаете на html размер шрифта 1px, тогда на каждом элементе пиксели преобразуются в то же количество, но уже rem. То есть задаете вместо width: 200px -> width: 200rem. И все. Никаких дробей и есть масштабируемость.
@@rv6819 это легально вообще?
Спасибо за полезное видео, я под конец уже стал засыпать от такого приятного голоса)
Красота!!!
Видос как нельзя к стати мне попался, много чего я оказывается не знала про единицы измерения, а что то даже забыла, большое спасибо за увлекательный и познавательный ролик
Рада, что ролик помог! 🤗
Спасибо! всё внятно и доходчиво =)
Спасибо за хорошие пример с rem, как раз не мог определится, использовать или нет, однозначно да)
Спасибо, всё чётко и понятно!
Спасибо за разъясняющее видео! Обычно,когда я верстал,я чисто наугад подбирал единицы измерения,типо:"Ну,работает,и ладно" )
😂 думаю, много кто так делал в первое время
Спасибо за труды, но... видео без вывода. В каких случаях применять ту или иную размерность? Почему? Актуальность разновидности размерности на сегодняшний день. И на будущие, просьба рассмотреть стилизацию и , не в классическом виде (браузерная реализация), а в разрезе дизайн-макета (хотелок дизайнера).
Думаю, выводы я обозначу во второй части видео по этой теме
А что означает "в разрезе хотелок дизайнера" ?
@@astrotrain Высота/ширина/цвет/розовое пони - при наведении на пункт, говорит Здгаствуйте!
@@alexpop2728 плохо что ржачнЫх смайлов нету в ютубе)))
@@justRamzes вот когда надо отцентровать селект при открытии в моб отображении на айфоне, становится уже не до смеха. он просто не умеет это делать в своем сафари.
Какая красавица! Спасибо большое за такое прекрасное видео и Ваше личное сочетание красоты и ума!
Супер, спасибо!
Спасибо большое
ты молодец куколка, СУПЕР!!!
Отличное видео
Где можно приобрести такую книгу? Спасибо
3 вопроса Анне:
1) А если мы вместо селектора :root укажем селектор тега, т.е. html, будут ли работать rem у других элементов?
2) Можно ли, не прибегая к калькулятору, изменять значения в корневом каталоге, указывая в px или тогда rem у других селекторов сломается?
3) Я правильно понял, что vmin и vmax будут вычисляться относительно того, что меньше: если меньше высота, то относительно высоты, если ширина - то ширины, или механизм другой?
Ждем 2ю часть
Оо, я давно хотел это узнать. Спасибо!
Молодець)
Спасибо, Анна! Устал пользоваться гуглом. Теперь буду пересматривать этот видос
Замечательно 😊
Использую мак прошку, 13"
В новом табе в хроме, открываю дев-тулс и смотрю рассчитанные свойства для body, и вижу там что ширина 1280 пикселей.
Почему так?
Ведь у прошки ретина и у 13" ширина в пикселях - 2560
Спасибо
у меня вопрос
как узнать пикселей в процентах.
например у меня: margin-top:500px и я хочу это указать в процентах?
обший размер каркаса(контейнера) 1200px
Пару вопросов. 1. почему в html сразу не прописать fz:10px? 2 Думаю на данный момент производительности браузеров хватает сил rem перевести в px. После пары случаев кода клиенты при приемке проекта(4-10 страниц) вдруг потребовалась версия для слабовидящих резко перешел на rem. Собственно 2й вопрос зачем в px все переводить? Ради производительности?
как вариант в зависимости от нужд и самого проекта можно обойтись этим:
html, body {
font-size: calc(1rem + 1vw);
}
или
html, body {
font-size: calc(1rem + 0.2vw);
}
или любой подходящий под проект вариант
Интересный метод. Никогда не использовала его 🤔
а можно ли указать и ширину и высоту? или это не имеет значения?
:root {
font-size: calc(.5em + 1vw);
}
В качестве минимального
размера шрифта здесь выступает 0,5 em, а 1 vw добавляет гибкую скалярную величину. Это даст вам основной размер шрифта, который меняется от 11,75 пиксела на iPhone6 до 20 пикселов в окне браузера размером 1200 пикселов. Можете настроить эти значения как хотите.
Теперь вы реализовали бОльшую часть своей адаптивной стратегии без единого
медиазапроса. Вместо применения трех или четырех контрольных точек со сложным кодом все элементы страницы масштабируются плавно в соответствии с размером области просмотра.
(Кит Грант - "CSS для профи" (2019) Глава 2 - Работа с относительными единицами - стр.74)
@@giggsvea Привет, заинтересовал данный метод ... единственное мне не понятно, вот сверстал ты макет, подогнал размеры шрифтов примерно или в перфект пиксель на определенном разрешении, а если на другом мониторе разрешение больше, получается все размеры с макета увеличатся? На уменьшение разрешения понятно, там адаптивность пошла, а вон на увеличение я не понимаю, всё же поедет. Да и в целом не понятно, на каком разрешении монитора то верстать ) или я что то путаю?
@@ihabia вы применяли данный метод на практике или просто в теории размышляете?
А почему бы в примере 12:24 не использовать для :root размер в px?
Понты))
Любимая стриммерка!))
Блогерка ещё скажи)))
Спасибо за познавательный ролик)
Расскажите подробнее, пожалуйста, в чем разница между % и ем.
P.S. 400 не пикселей, а процентов.
Проценты идут от размера блока, а ем от заданного font-size. Т.е. если "font-size: 12px;", то 1 em = 12px. 1ем = 100%, 1.5ем = 150%, 2ем =200%.
//Написал, не посмотрев видео. Похоже, вопрос был в другом.
Молодец
это линзы?
Какая красивая девушка! А взгляд завораживает!)))
Вот эта прическа топ!
Крутяк
А что сами предпочитаете использовать в повседневной работе для web ?
Зависит от целей, но чаще всего это px и rem. Если работаю с codepen, то могу воспользоваться и vw
@@annblok_webdev скорее всего rem лучший вариант, потому что любой проект адаптируется под мобильные
Почему так сложно, в случае с rem можно задать html, body font-size:16px (или 10 чтобы удобно было использовать rem)
И при 10px, задаём элементу 1.6 rem получаем 16px, в медиа меняй в корне пиксели и ремы подстраиваются
13:14 - в body прописывается 1,4rem и все счастливы 👌от боди будут отталкиваться уже все остальные
Спасибо, очень помогла! P.S. Настолько голубых глаз в жизни эще не видел)
а попадались на жизненном пути востребованные нетипичные вестальщики ?
Аня, ты очень красивая ^^ И материал очень полезный. Лайк и подписка =D
Доставка в Узбекистан имеется? я про (Frontend book)
Да, доставим :)
Лайк тожи поставил
Ребята, я начинающий. Возник такой вопрос. Я вот смотрел на биржах фрилансеров заказы. И те из них, которые требуют верстки только на html, css и js ооооочень малое количество. В основном, заказы требующие "натянуть" сайт на какой-то CMS. Так вот и вопрос: возможно ли выйти новичку на зароботок, хоть и малый, но стабильный, с такой ситуацией с заказами?
А за видео огромное спасибо! Наконец-то я понял эти величины.
Вы молодец!
Привет, прошло 2 года, если ты еще живой, то расскажи, получилось у тебя начать зарабатывать или бросил?
@@bannano3o Ого, а я даже забыл что я такой комментарий оставлял. Да, я изучил Ангуляр и теперь работаю на нём уже год в кампании. Главное не забрасывать это дело: либо до конца и ты находишь работу, либо ты сдаешься. :)
А на фриланс я не пошёл, не моё это было.
@@bannano3o Было трудно и нелегко, но оно того стоит
@@bukanaka , где теперь работаешь и на какой позиции, если не секрет? А еще конечно, какими знаниями обладаешь? Я тоже учусь, сейчас где-то на уровне чуть выше базового понимания верстки
@@bannano3o Ну, я уже на пути к миддлу как фронтенд разработчик. Работаю в кампании.
Коротко про EM и REM для тех кто не понял: это те же проценты (%) но в виде цельных или дробных чисел.
Например: 150% = 1.5 ( так как что бы найти 150% от любого числа, его надо умножить на 150/100 то есть на 1,5)
80% = 0.8;
320% = 3,2;
17% = 0,17;
спасибо!
@@user-pc5sr2sg7x 8 месяцев ждал этого 🤣
@@gringo5058 😁благодарность нашла своего героя
Необычные глаза) радужка по краям черная, а ближе к зрачку синеет и светлеет))
Я использую html font-size 62.5%, и для body font-size x rem (где x- дефолт шрифт текста в макете 1.4-1.6rem обычно)
по мне это самое удобное, перевод 10px в 1rem. И более удобно одним медиа запросом менять font-size для html.
Да, я как раз про это говорила в видео, но у этого метода есть один основной минус, это то, что придется переопределять стили для всех тегов, где будет содержаться текст
@@annblok_webdev Анна спасибо за видео, раньше верстал в пикселях, вот теперь решил понять другие единицы. Только я не совсем понял, почему у метода выше существенный минус, ведь если допустим не 10px делать, а 14px, как вы в видео говорите, то всё равно же придется переопределять стили для всех тегов, где шрифт не 14px. Так ведь? Или я что-то не понял )
Иван Орлов в целом по сайту придётся меньше стилей переопределять. Если, конечно, какой-то элемент нужно увеличить или ещё уменьшить, то да, придётся решить вопрос локально. Но это гораздо меньше подключений, чем если бы мы работали с пикселями :)
@@annblok_webdev Анна, а ты сама какие единицы предпочитаешь использовать для font-size?
@@ihabia в основном - rem, для тестовых набросков - px
Не проще в :root указать px? Зачем в нём так выёживаться с em или rem?
О, Создатель! Я хочу от этой женщины ребёнка с такими же глазками как у неё.❤
Анна, а вы не ошиблись с процентами, что 100% это 16px, а 200% это 32px? Потому что базовый же 16px, а 200% в два раза, этого не понял (5:38), попробовал и вроде ошибка.
берет процент от родительского компонента
Всё... влюбился...
Подписываюсь однозначно! ))
спасибо за видео! подскажи пожалуйста, как ты заряжаешь свой макбук? я его заряжаю до 98%, убираю с зарядки и разряжаю до 8%. Но я много работаю на нем и порой в день таких процессов может быть 2 и больше. или лучше постоянно держать его на зарядке, а ночью вытаскивать?
Обычно я делаю примерно также. Но если пребываю только в одной точке, то, как правило, все время на зарядке.
@@annblok_webdev спасибо! а она так не будет портится? имею ввиду зарядка. А то сколько читаю, некоторые пишут что если так держать, то он будет вздуваться, кто-то пишет , что все норм ...
@@yura_8952 Если не вынимать зарядку то батарея будет портиться меньше, лудше угробить зарядку чем батарею, если греется отключай периодически.
Юрий Аванесов Лучше вытащить батарею, иначе точно вздуется!
В её глаза можно смотреть вечно...
Ань, привет. Ролик получился отличный. Было бы классно, если б ты видео делала, как у Тревиса с канала DevTips, когда и код в кадре, и автора чуть-чуть. Харизмы у тебя хватает, а то что зрители отвлекаться будут, так это их проблемы 😁 Может кто-то подписывается, чтобы прийти на тебя посмотреть 😎
Привет, посмотрела его канал по наводке. Единственный минус демонстрации лица, на мой взгляд - случайно можно забыть, что определенная часть экрана будет перекрыта и это плохо(( Особенно, если там будет код. На некоторых видео есть такой косяк((
@@annblok_webdev Моё дело маленькое - предложить 😊 И спасибо за ответ. Приятно, когда автор отвечает на сообщения, да ещё так оперативно 😉
@@user-et2me5vv4d 🤣🤣🤣
Текущий вариант вполне норм. И личико в начале. И нормально текст видно на весь размер. Правда одного меня наверно глаза пугают такие с линзами))
Спасибо тебе за данное видео. Сам я Техник-программист, когда учился мы создовали сайты только в HTML мы даже не работали с CSS. Сейчас изучаю вёрсту, вот мои поиски привили к тебе. Спасибо что ведёшь блок для меня и других начинающих и опытных верстальщиков. Удачи тебе и здоровья)
Спасибо! 🙌
ай какая умка, молодец, и спасибо=)
над в точку сделать, этот бук, можно и рисовать и писать
4.08 - ...будут преобразовыватся в проценты - оговорочка. в пискели на самом деле
Я в своих проектах использую только rem и не парюсь.
Ubuntu классный шрифт.
Анна, при объяснении процентов вы несколько раз оговариваетесь и путаете проценты с пикселями.
С процентами в font-size никогда не пользовался посмотрев видео понял что они для font-size работает точно так же как em вот только про это не упоминали
а какие глаза!!! прям про CSS забываешь...
em вообще какой-то не такой.
em - Разница между rem и em в том что rem в любой вложенности заставляет элементы смотреть на html или :root{}, получать
там значение в px(любые единицы переводятся в px) и умножает на rem наследованный rem.
em же заставляет брать элементам ближайшее родительское значение px и умножает на em.
em какой-то не предсказуемый. С разными тегами именно во вложенности он по разному себя ведёт.
Проблемы.
1. Нужно чётко следить сколько пикселей наследует блок(родитель) в котором хотим менять значения на em. Конечно же если манипулируем ещё пикселями.
2. Явление роста или уменьшения шрифта во вложенных списках друг в друга.(в div нет такого)
3. не наследует em. умножает свой em на ближайшие px, а вложенность наследует px не этого родителя, а выше
Два раза пересмотрел, начиная на ем перестаю понимать.(
ем1.2- тоже что "Больше в 1.2 раза ". Больше чего? Больше чем контекст (родительский елемент).
Если про шрифт говорить
Рассказывает она конечно правильно но очень топорно
Я так делаю
html
font-size 62.5% // 10px
body
font-size 1.6rem // 16px
Неправильно, да?
10px в качестве базы - не лучшее решение, т.к. придется переопределять font-size для всех тегов, где будет содержаться текст, следовательно будет больше CSS кода в файле, что будет влиять на его вес. Это особенно актуально для крупных проектов. Лучше за базу взять от 13px до 16px (что и так стоит по умолчанию).
@@annblok_webdev ну вот я в бади его и возвращаю в 16px
@@astrotrain Точно, первое ваше сообщение забыла развернуть. В целом, этот метод тоже имеет место быть. Только хотела уточнить, почему в html вы используете именно %, а не em, например?
@@annblok_webdev ну проценты мне как-то привычнее всё-таки, чем em, а в таком применении думаю одно и то же будет.
em пока стараюсь не применять повсеместно, как-то опасно выглядит зависимость друг от друга по цепочке
Клиент в админке сделает какую-нибудь непредусмотренную вложенность в статье и текст будет уменьшаться или увеличиваться как у вас во вложенных списках, страшно)))
@@annblok_webdev зачем туда просто не писать в пикселях?
Так тебе намного лучше
Не очень понятно зачем столько единиц измерения для шрифта. На практике видел только px и rem.
Сам использовал rem с медиа запросами, для одинакового (пропорционального) отображения текста/элементов на разных разрешениях экрана.
Единицы %, vw, vh видел как используют только для позиционирования - разделения областей, например ширина блока 30% экрана.
Шаришь однако!!!
😊👍🏻
5:47 оговорка
Все верно
@@annblok_webdev как значение в 400 px "в два раза больше" может стать 32 px ?
@@annblok_webdev 4:08 еще одна оговорка
Анна, зачем ты мучиешь себя контактными линзами?
Она так смотрит, что мне страшно
Веб-разработка не для слабонервных
Согласен, было желание отодвинуться от монитора, лол, слишком близко и взгляд неестественно пронзительный))
PX в CSS не всегда физический, особенно на экранах с большей плотностью пикселей
Сейчас это актуально только в отношении к экранам Retina.
@@annblok_webdev тобишь почти для всех телефонов, как как у них часто разрешение больше чем у ноутбуков
+
В чем прикол использовать в root проценты или рэмы, высчитывать что-то с калькулятором?
html
font-size: 1px
body
font-size: 16rem;
.header
font-size: 25rem
В коде которым вы собираетесь делиться не должно быть rem, хрен знает как его будет использовать другой.
Жалко книжку в 2022 не купить(
Такое впечатление, что у Анны первый иностранный был французский )) V - это "ви", не "уи" )) хотя , французский ,согласитесь, ей больше был бы к лицу)) милая)
ежедневник классный, сразу захотел себе такой и перешёл на сайт, чтобы купить.... и не купил(
Анна, 2500 за ежедневник, ну камон((( я лучше за 1500 куплю JS от флэнагана на 1к страниц(
чувак. контент у нее может и ок вроде, но вот эти приколы=). И ведь люди реально берут эту макулатуру за 2500
Блин это реальные глаза или линзы?
Это не глаза, это глазишча! ((:
это линзы, но суть не в этом.. Умна чертовка!
.
Уважаемая когда произносишь i у тебя больше ы получается. Это колхозно звучит.
Девушка, слишком много рекламы, мысль теряется.
Если б это был развлекательный ролик, куда ни шло. Вы забываете, что сейчас ютуб ставит две рекламы подряд за один раз. Смотреть их одно мучение. Я могу еще потерпеть рекламу в конце и в начале ролика и всё. Можно конечно пропустить, но эти пять секунд на два бесят!!!
Давайте без "давайте"
Ок, босс
Почему нельзя было в шараге , с такой подачей учить :)...... лучше объяснения данной темы не найти .
Не в каждой шараге препод болеет за свой предмет )
В шараге вебу учат? 🤔 Я что-то пропустила в системе образования?
Типичный Верстальщик ну если под шарагой понимать техникум, то да, учат 😊
бесит вот это "lorem" да ещё и "Ipsum" бєєє, и подобное на латыни, Почему народ это использует??
Слабенько
Дизлайк👍👍👍