CSS функция clamp(). Адаптивный размер текста. Прощайте медиазапросы
Vložit
- čas přidán 20. 10. 2023
- Подробный разбор CSS функции clamp(). Адаптивные размеры в CSS, адаптивный размер текста.
Расчет значений для clamp: min-max-calculator.9elements....
Чат верстальщиков: t.me/+QAxmsKj2HyWfEKzz
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Бесплатный курс "Создай свой первый сайт на HTML5 и CSS3"
От установки редактора, до публикации в сети.
👉 Получить уроки, конспекты, макет и код из уроков: webcademy.ru/htmlsite/
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Курс по созданию и верстке сайтов: webcademy.ru/htmlstart/
Обучение с наставником, 3 месяца, результат, гарантия.
Научим создавать веб-сайты и зарабатывать на этом.
Старт обучения: 05 Августа 2024 года.
💻 Курс "Frontend разработчик. JavaScript + React": webcademy.ru/jscourse/
Обучение с наставником, 3 месяца, результат, гарантия.
Старт обучения: 12 Августа 2024 года.
💻 Курс "Разработка сайтов на PHP + MySQL":
webcademy.ru/phpcourse/
Создание сайтов с системой управления.
Присоединиться к курсу можно прямо сейчас.
🏁 Обучение с нуля
💁♂️ Обучение с наставником
🎯 Доведение с нуля до результата
🏢 Помощь с трудоустройством
💵 Поможем взять первый заказ на фрилансе
💳 возможна рассрочка
💳 если курс не понравится, вернём деньги в первую неделю
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💈 Сайт школы ВебКадеми: webcademy.ru/
💈 Вступайте в группу Вконтакте: webcademy
💈 Подписывайтесь на Telegram: t.me/webcademynews
От души душевно в душу!!! Просто объяснил и на хорошем примере! 👍
Отлично. Только вчера интересовался этой темой, потому что надоело на глаз задавать fz для @media. Нашел несколько решений и вот ваше видео.👍
Здорово, спасибо, Юрий, очень полезно ❤
Отличная, полезная функция. 👍спасибо!
дай бог здоровья 🤝 очень доступно объясняете
Круто, буду использовать.
спасибо за нужный и полезный контент
Как всегда - лучшее обьяснение
как жаль, что на ваше видео я наткнулась только сегодня
вчера был дедлайн по главной странице в курсаче
и как раз была проблема с масштабированием текста, которую я решила более криво, чем в видео)
спасибо!
Супер! Спасибо❣️
Отличная работа!)
Благодарю за очень полезное видео!
Это офигенно!
Спасибо!
Дело не в том, что может быть много текста в заголовке, а в том, что при vw высота текста растёт при увеличении ширины окна, а вот высота окна не обязательно вырастет, наоборот, может и уменьшиться. Поэтому заголовок может просто вытеснить другие элементы по высоте и сломать вам дизайн... если он есть)
Спасибо, как всегда, четко, доступно, понятно.
Едва досмотрел, - полез заказчику на сайт применить.
Круто
👍
А как на производительность страницы влияет clamp()?
А есть видео как такую среду разработки создать и настроить? Пока балуюсь в блокноте, но это только для простых вещей.
Да, видео по редактору VS Code czcams.com/video/942oq0_v95E/video.html
Привет, а что это за плагин, который показывает область от открывающего тега до закрывающего ? и что за тема редактора ?
Настройка VS Code "editor.guides.bracketPairs": "active",
Я делаю размер текста и все остальные размеры относительно размеров экрана через переменные. (Тут есть нюансы, касаемо высоты или ширины и горизонтальной и вертикальной ориантации) И все. На любом устройстве красиво. Никаких пикселей и кучи медиазапросов.
Скиньте ссылки на один, два проекта с размерами указанными таким способом. Если можно с макетами. Интересно будет посмотреть. Сюда или в разбор верстки: forms.gle/uzwzyMDKayxamXsd9
Пример уже есть, интересно было бы посмотреть?
@@-Vladimir-- примеры не могу показать, так как крипта и анонимность.
Обычно делаю % от высоты экрана (по ситуации конечно). Стараюсь никаких "пикселей"
@@michaelkamkoа можете поделиться конкретно формулами, пж🙏
@@user-ik8sm2th7i формула такая : переменная для обычного текста: 2.4 dvh (2.4 vw для портретной ориентации).
Размеры больше: 3.2, 4.8, 6.4 и так далее.
Размеры меньше: 1.6, 1,2
(Надеюсь, ничего не напутал)
firefox эта функция отрабатывает не так как ожидаешь, если использоват ее с rem единицами))
Прохожу обучение сейчас, никак не пойму как правильно использовать эту функцию, мне дали адаптивный макет под разные разрешения и во всех трёх (телефон, планшет, десктоп) в фигме у текста стоит размер в 18пх, каким образом мне нужно подобрать значения для функции что бы менялся размер, ведь минимального и максимального значения я не знаю ?)
Если у элемента всегда одинаковый размер то и менять его не надо и clamp в таком случае не нужен.
@@WebCademy большое спасибо, тоже пришёл к такому выводу)
Есть ли видео точно также но с блоками дивами картинками?
Есть czcams.com/video/kATSvTqBfPw/video.html
@@WebCademy спасибо большое
Привет! Хотел скачать код но там стоит пароль чтоб извлечь из папки .Получается что код не посмотреть ?
Какой пароль? К этому урока нет архива с кодом. О каком архиве вы пишите, скиньте ссылку.
И я никогда не ставлю пароли на архивы с кодом которые выкладываю в общий доступ.
Почему бы не использовать классически устоявшиеся относительные величины, rem, em вместо этого?
Они статичные, там будет одна и та же величина шрифта на всех разрешениях, то есть и на пк размер 100 пикселей, и на телефоне, а тут можно и в rem задавать, и в px, но суть в том, что шрифт будет от ширины экрана меняться)
А как сделать выделение тела блока уголком как на видео ? Скажешь как с меня подписка навсегда
Не понял вопрос. Какого блока? Можно тайм-код на котором это происходит. Если в редакторе свернуть/развернуть так в VS Code просто навести на колонку со строками и там будет стрелочка чтобы срыть/раскрыть блок кода.
@@WebCademy11:06 когда например медиа запрос открываешь у тебя от открывающей скобки до закрывающей уголок подсвечивается
@@WebCademy1:06 там также
@@user-yj2ye2su4k Настройка Editor › Bracket Pair Colorization: Enabled
6:26
8:36
Спасибо. Но хорошо было бы узнать обратную ситуацию: к примеру - от 600px до 1200 штрифт не изменяется , но если размер становиться меньше 600px до размер шрифта уменьшаеться, и если становится больше 1200, то шрифт начинает увеличиваться. Это логичнее.
Тогда вам помогут медиа запросы, в сочетании с vw единицами измерения для размера текста.
@@WebCademy я так понимаю, то без медиазапросов всё равно никуда не денешься для адаптивной вёрстки?
@@user-do3or8jr7v Да, они все равно нужны.
@@WebCademy Обречённость... они же подтормаживают загрузку..
@@user-do3or8jr7v На сколько? Это на грани погрешности работы процессора. И то, я бы сказал что это даже не заметно. P.S. Говорю про нормальную верстку, а не про 100 медиазапросов в одной странице.
а можно ли это использовать для чего-то еще кроме font-size?
Да, например для width или height, margin, padding.
не проще написать миксин?
Проще чем что? Конечно вместо расчетов каждый раз через онлайн сервис, можно написать миксин с нужными расчетам и использовать его.
@@WebCademy проще, чем вот это вот всё.
width можно так задавать ?
Можно
@@WebCademy а как ?
@@artyrdanilov2791 Например так:
width: clamp(200px, 20vw, 600px);
Для етого сервиса нужен еще один сервис чтоби переводть в пиксели, рукалицо
Спасибо!