11. Единицы измерения в CSS - px, %, em, rem, vw, vh. Относительные и абсолютные величины

  Рет қаралды 7,861

Александр Ламков — Friendly Frontend

Александр Ламков — Friendly Frontend

Күн бұрын

Пікірлер: 24
@svitboomer8840
@svitboomer8840 Жыл бұрын
Ухххх, сочно. Жду как правильно/удобно управляться размером шрифта на странице
@yourbestquestion
@yourbestquestion Жыл бұрын
Привет, Саша, спасибо за ролики.
@colodatwin3102
@colodatwin3102 Жыл бұрын
Круто, жду каждые ваши уроки с нетерпением) Кашу в голове приводите в порядок) Сейчас как раз верстаю макет, решил в этот раз сверстать всё на rem , а оказывается в этом смысла нет) Я думаю так лучше, лишь потому что в настройках браузера можно будет изменять шрифт, если не задавать его html тегу изначально, есть ли в этом смысл? Да и плагин есть удобный в VS code , кнопку нажал px в rem перевелись) Ну или миксины в scss использовать. Всё таки тема, что лучше использовать не до конца раскрыта, надеюсь на практике увидим)
@AleksanderLamkov
@AleksanderLamkov Жыл бұрын
> Я думаю так лучше, лишь потому что в настройках браузера можно будет изменять шрифт, если не задавать его html тегу изначально, есть ли в этом смысл? Смысл в rem есть, но нужно использовать его осознанно и не везде. Я не вижу в нём смысла, т. к. есть масштабирование окна браузера, которое пропорционально будет изменять интерфейс и, если сайт грамотно адаптирован, пользователь получит то, что хочет: более мелкий текст при уменьшенном масштабе и более крупный при увеличенном. > Да и плагин есть удобный в VS code , кнопку нажал px в rem перевелись) Ну или миксины в scss использовать. Когда-то и я использовал подобную вещь. Преобразовал в проекте в rem'ы вообще всё: от font-size до border-width. Это было ужасно :) > Всё таки тема, что лучше использовать не до конца раскрыта, надеюсь на практике увидим) Да, разумеется, в мастер-классах я это всё объясню. Спойлерну немного: всё через хитрую формулу в calc и vw-единицы и, желательно, через миксины препроцессора стилей.
@svitboomer8840
@svitboomer8840 Жыл бұрын
@@AleksanderLamkov Охринеть....
@bormna
@bormna 4 ай бұрын
шикарный контент! Благодарю
@Anatoli-bq1pe
@Anatoli-bq1pe 3 ай бұрын
Классный ролик! Большое спасибо
@Ivanfwit
@Ivanfwit Жыл бұрын
пропустил часть новых вышедших уроков, нагоняю с удовольствием)
@alexb.2616
@alexb.2616 11 ай бұрын
Спасибо за em, rem и вьюпортединицы! Наконец-то это улеглось в башке.
@smotritelyoutube
@smotritelyoutube Жыл бұрын
Like!!! Super
@evgeniy3370
@evgeniy3370 3 ай бұрын
Александр что за грамотный метод изменения размера шрифта ? Есть уже видео на эту тему ?
@AleksanderLamkov
@AleksanderLamkov 3 ай бұрын
На канале есть два мастер-класса по верстке, в обоих применён вполне современный метод через clamp и vw: Для новичков: kzbin.info/aero/PL0MUAHwery4rqkzKF1mDBCIH_eZgjY6uN Для продвинутых: kzbin.info/aero/PL0MUAHwery4rdZt-8E9p9zty2ZUCH6Ai3&si
@amphetyze
@amphetyze 3 ай бұрын
долго я обходил стороной em, rem единицы, с остальными уже знаком как год. я понял как работают em и rem, но где использовать их? я даже не представляю. и для чего? чем эти единицы могут быть полезны по сравнению с px или %?
@AleksanderLamkov
@AleksanderLamkov 3 ай бұрын
Пример с em: Заголовок, внутри часть текста с мЕньшим или бОльшим шрифтом. Заголовку задаем размер в пикселях, а внутрянке заголовка - в em'ах, чтобы финальный font-size зависел от фонтсайза заголовка. На адаптиве меняется фонтсайз заголовка, ну а его внутренний элемент с em единицами в фонтсайзе, автоматически подстраиваться под новые условия. Пример с rem: Задаем в html {} фонтсайз 10px, затем всем уровням заголовкам задаем всё в rem. На адаптиве уменьшаем лишь значение фонтсайз в html {}, а размер заголовков пропорционально уменьшится автоматически.
@amphetyze
@amphetyze 3 ай бұрын
@@AleksanderLamkov так, с rem все понятно, спасибо большое. а вот насчет em, если я создам заголовок с font-size: 1em, внутри помещу span элемент, с font-size: 0.5em, то span ведь будет равен 8px? Так как 1em по умолчанию это 16px, или я ошибаюсь?
@AleksanderLamkov
@AleksanderLamkov 3 ай бұрын
em для font-size - это коэффициент от font-size родительского элемента em для других свойств - это коэффициент от font-size текущего элемента Заголовку указываем font-size 30px. Дочернему элементу заголовка font-size 0.5em, который фактически вычислится браузером в 15px.
@slamedesign
@slamedesign 11 күн бұрын
7500 просмотров на ролике? лол что? Где алгоритмы ютуба? Тут минимум должно быть тысяч 200.....
@uzver3787
@uzver3787 Ай бұрын
меня на собесе по lvh dvh нагнули немножечко)
@AleksanderLamkov
@AleksanderLamkov Ай бұрын
О, ну это довольно свежие единицы измерения. Удивлен, что про них уже где-то спрашивают 🙃 Кстати, на канале был про это ролик: kzbin.info/www/bejne/l3-qqqRtn5Wsj6Msi=TSSQIblGYEnSGTWO
@uzver3787
@uzver3787 Ай бұрын
@@AleksanderLamkov да. Мобайл верст подход, поэтому сразу с этого. Ещё про clamp)
@Юджин-й4ч
@Юджин-й4ч Ай бұрын
frontend РАЗРАБОТЧИК!?
@AleksanderLamkov
@AleksanderLamkov Ай бұрын
Что?
@АлексейКоваленко-н2ч
@АлексейКоваленко-н2ч 7 ай бұрын
Как на уроке. Быстро, не акцентируя внимания, монотонно, чтение по тексту
@AleksanderLamkov
@AleksanderLamkov 7 ай бұрын
А надо как? Как монолог в стендапе? Медленно? Хлопать в ладоши, привлекая внимание? Не использовать продуманный сценарий, а импровизировать? За этим вам на другие каналы.
12. CSS Flexbox Layout. Флексы в CSS. Гайд по флексбокс
16:35
Александр Ламков — Friendly Frontend
Рет қаралды 10 М.
Spongebob ate Patrick 😱 #meme #spongebob #gmod
00:15
Mr. LoLo
Рет қаралды 12 МЛН
🍉😋 #shorts
00:24
Денис Кукояка
Рет қаралды 3,1 МЛН
15. CSS Grid Layout. Грид-сетка. Гайд по гридам в CSS
14:16
Александр Ламков — Friendly Frontend
Рет қаралды 12 М.
Frontend Roadmap 2024 | Что должен учить фронтенд-разработчик в 2024 году
14:35
Александр Ламков — Friendly Frontend
Рет қаралды 66 М.
Илья Барбашов - Что я понял за 5 лет тимлидства
35:52
Orel.codes - Блог программиста
Рет қаралды 12 М.
14. CSS псевдоклассы - child, not. Состояния hover, focus и focus-visible, active, disabled, checked
12:06
CSS Функции calc(), min(), max(), clamp()
10:06
Александр Ламков — Friendly Frontend
Рет қаралды 6 М.
Spongebob ate Patrick 😱 #meme #spongebob #gmod
00:15
Mr. LoLo
Рет қаралды 12 МЛН