Пиксели в CSS не нужны — используй Rem! Адаптивный размер шрифта, Sass-миксин и функция Px to Rem

✏️ Обсудим проблему пикселей и её решение — единицу измерения Rem, которую можно и нужно использовать буквально для всех свойств и даже для определения диапазонов медиазапросов. Разберём, как реализовать адаптивный размер шрифта через CSS-функцию clamp и единицы измерения rem + vw, обернём всё в удобный Sass-миксин fluid-text. Создадим функцию преобразования значения из пикселей в Rem через Sass-функцию.

🔴 Timeline:
▶ 00:00 | Введение
▶ 00:30 | Проблема пикселей
▶ 03:26 | Единица измерения Rem
▶ 05:36 | Rem для font-size и других CSS-свойств
▶ 08:17 | Единица измерения Em
▶ 09:19 | Rem для размеров элементов
▶ 11:15 | Rem для медиазапросов
▶ 14:55 | Неправильное использование Rem-единиц — уменьшение font-size для html при адаптации
▶ 17:30 | Адаптивный размер шрифта через clamp, rem и vw
▶ 22:20 | Преобразование значения из пикселей в Rem через Sass-функцию
▶ 24:45 | Заключение

📚 Ссылки:

💬 Чат в телеграмме (помощь новичкам):

🔸 Boosty (поддержать канал):

🗂️ Бесплатные курсы на канале:

📌 Автор:

#frontend #фронтенд #css

[AleksanderLamkov]

📌 Друзья, в телеграмме у нас есть отдельный чат, где вы можете задать вопрос по фронтенд-разработке и вам постараются помочь:


Если вам это интересно, присоединяйтесь, задавайте вопросы и помогайте другим 🙂

[AlexanderBogdanov-dwcw]

твой канал лучшее что я видел во фронте, спасибо Александр!

[ВладимирБун-мй]

Отличное видео! Единственный нюанс — важно, чтобы дизайнеры учитывали это при разработке дизайна, но на практике такое случается крайне редко (за 20 лет работы я с таким не сталкивался). Заказчик и дизайнер создают макет, требуя точного соответствия, и любое отклонение может привести к проблемам

[NtDrke]

3:20 чтобы все страницы открывались в одном масштабе, например 125% это делается в *настройках браузера* а не через ctrl+ . Не важно какую ты страницу откроешь, она откроется в 125%. Открыть настройки браузера и написать в поиске настроек - *Масштаб* и выбрать нужный масштаб

[АндрейЦарик-чж]

Оооо А нам еще нужна теперь функция для перевода в em. За видео спасибо!

[AlexanderShamarin]

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

Спасибо, за разъяснение по "полочкам".

[Voronoka]

Наконец-то я теперь понимаю эти единицы измерения. Раньше тыкал пальцем в небо, а теперь буду знать за что они отвечают.

Спасибо большое за такой подробный гайд!

[leader_channel]

Спасибо за видео. Видео очень качественный 👍

[ЗадротизПреисподней]

Стоит также упомянуть дефолтный аналог показанной в видео функции rem, а именно font-size: 62.5% в html, благодаря которому мы делаем 1rem равным 10px(только если размер шрифта браузера равен 16px). Это очень помогает при верстке, так как не нужно сидеть с калькулятором, чтобы избежать получания пистов от дизайнера или заказчика. Важно только учитывать, что при изменении размера шрифта в браузере, тот же Large будет равен 15px, а не 24px, что может может вызвать удивление у пользователей, которые всегда используют large и тут вдруг видят шрифт меньше ожидаемого). Благо я пока не получал макеты, которые бы включали дизайны на разных настройках браузера. Ну и учитываем, что при использовании каких-то библиотек нужно или прописывать для компонентов библиотеки свои стили или не трогать font-size в html вообще(актуально для UI-китов, т.к. мы в основном полагаемся на них(нет, мы работаем с макетами фигма и создаем свои киты)), хотя это упоминалось в видео)

[ddduser]

Как мне билизки по духу мыли автора! Сколько смотрю и волосы дыбом, что все учат использовать пиксели и em, а потом удивляются, что костыли надо использовать и отлавливают эти em в 0, 01 и !important

[yunadzukifaruhatoo]

Использую только rem. Очень нравится верстать в них и все отлично тянется

[AntonSchmidt-ikqq]

Классная тема, спасибо за контент ! тоже недавно сталкивался и заметил что в WordPress многие конструкторы и CSS framwork такие как Core Framwork и Automic CSS используют clamp переменные для всего практически, например --space-xs и тем самым могу применять на падинги гэпы и маржины и ТД. Хотелось бы узнать ваше мнение насколько практический этот подход?

[cododelia]

Масштаб не обязательно на каждой странице крутить, он в настройках тоже есть, глобальный, изменить дефолтные 100 можно на нужный

К ремам аргумент этот не подходит
Плюс если большинс во сайтов так сделаны - никто их переделывать не станет от этого, уже ничего не поделать

[yeehaw]

Получается, что такой подход скорее подходит к верстке без макета, или с макетом одной версии (только под десктоп например)? Есть ощущение, что соблюдая pixel perfect будет не всегда удобно использовать rem/em.

[antoncigur]

что-то ютуб и многие известные сайты не реагируют на увеличение шрифта в браузера. Так что ставим html:16px !importnant, и шлем пользователя за очками

[geek]

Попадался однажды проект, на котором сделали медиа запросы по rem. В плане поддержки это просто лютый ад.
А верстать с этим и вовсе невозможно.

[biLLie_wiLLie]

Спасибо tailwind - благодаря ему перешёл на rem

[Kiyanti]

Ну а если задача сделать кнопку или ползунок который меняет размеры шрифта на сайте, я думал самое логичное просто менять число fs html, имея везде на сайте fs в rem, это в целом плохая идея так делать?

[petersen]

Браузер всеравно переводит в рх все, размер текста, ширину, высоту, падинги, марджены и т.п. велечины. Девайсы одного параметра: мобильный телефон - экран мобильного, планшет - экран плашета, десктоп - экран монитора. Никто не сидит и не таскает размеры екрана в большую или меньшую сторону кроме фротэндера. Так что проще просто задать новые параметры для кажого девайса и не изобретать колесо, которое давно изобретено.

[КириловНазари]

Будешь ли ты делать ролики по react js?