CSS функция clamp(). Адаптивный размер текста. Прощайте медиазапросы
Переглядів 10,599
6 місяців томуПодробный разбор CSS функции clamp(). Адаптивные размеры в CSS, адаптивный размер текста.
Расчет значений для clamp: min-max-calculator.9elements....
Чат верстальщиков: t.me/+QAxmsKj2HyWfEKzz
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Бесплатный курс "Создай свой первый сайт на HTML5 и CSS3"
7 уроков по 30 мин: webcademy.ru/htmlsite/
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Курс по созданию и верстке сайтов: webcademy.ru/htmlstart/
Обучение с наставником, 3 месяца, результат, гарантия.
Научим создавать веб-сайты и зарабатывать на этом.
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Курс "Frontend разработчик. JavaScript + React": webcademy.ru/jscourse/
Обучение с наставником, 3 месяца, результат, гарантия.
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
🏁 Обучение с нуля
💁♂️ Обучение с наставником
🎯 Доведение с нуля до результата
🏢 Помощь с трудоустройством
💵 Поможем взять первый заказ на фрилансе
💳 возможна рассрочка
💳 если курс не понравится, вернём деньги в первую неделю
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Сайт: webcademy.ru/
Вконтакте: webcademy
Telegram канал: t.me/webcademynews
@YaroslavlCity 7 днів тому
Едва досмотрел, - полез заказчику на сайт применить.
@user-dh7dp1zc3n 6 місяців тому
Отлично. Только вчера интересовался этой темой, потому что надоело на глаз задавать fz для @media. Нашел несколько решений и вот ваше видео.👍
@user-be8dy2lw3n 3 місяці тому
дай бог здоровья 🤝 очень доступно объясняете
@user-vn8ud6zn1c 6 місяців тому
как жаль, что на ваше видео я наткнулась только сегодня вчера был дедлайн по главной странице в курсаче и как раз была проблема с масштабированием текста, которую я решила более криво, чем в видео) спасибо!
@othersidesss1 6 місяців тому
Как всегда - лучшее обьяснение
@autlady 6 місяців тому
Здорово, спасибо, Юрий, очень полезно ❤
@ilyaVnukchinskiy 6 місяців тому
спасибо за нужный и полезный контент
@elenai7001 6 місяців тому
Супер! Спасибо❣️
@ringnull 6 місяців тому
Круто, буду использовать.
@Anatoli-bq1pe 4 місяці тому
Благодарю за очень полезное видео!
@alEL321 6 місяців тому
Отличная работа!)
@Goddamn_Right 6 місяців тому
Дело не в том, что может быть много текста в заголовке, а в том, что при vw высота текста растёт при увеличении ширины окна, а вот высота окна не обязательно вырастет, наоборот, может и уменьшиться. Поэтому заголовок может просто вытеснить другие элементы по высоте и сломать вам дизайн... если он есть)
@svg5359 5 місяців тому
Отличная, полезная функция. 👍спасибо!
@senianga1 4 місяці тому
Это офигенно!
@alexandrs.1706 6 місяців тому
Спасибо, как всегда, четко, доступно, понятно.
@datoshcode 6 місяців тому
Спасибо!
@user-ke5fn6sm8u 6 місяців тому
Круто
@biscvie 5 місяців тому
👍
@AlexeyKravets 6 місяців тому
А есть видео как такую среду разработки создать и настроить? Пока балуюсь в блокноте, но это только для простых вещей.
@WebCademy 6 місяців тому
Да, видео по редактору VS Code ukposts.info/have/v-deo/cWRjo6dnlqxqlnk.html
@user-oc7cv2nf1n 3 місяці тому
А как на производительность страницы влияет clamp()?
@user-nn9qy1yh3s 2 місяці тому
Привет, а что это за плагин, который показывает область от открывающего тега до закрывающего ? и что за тема редактора ?
@WebCademy 2 місяці тому
Настройка VS Code "editor.guides.bracketPairs": "active",
@Shukhratov 5 місяців тому
Есть ли видео точно также но с блоками дивами картинками?
@WebCademy 5 місяців тому
Есть ukposts.info/have/v-deo/o3GFh6yLqHiXsas.html
@Shukhratov 5 місяців тому
@@WebCademy спасибо большое
@PhilippJFray 3 місяці тому
Прохожу обучение сейчас, никак не пойму как правильно использовать эту функцию, мне дали адаптивный макет под разные разрешения и во всех трёх (телефон, планшет, десктоп) в фигме у текста стоит размер в 18пх, каким образом мне нужно подобрать значения для функции что бы менялся размер, ведь минимального и максимального значения я не знаю ?)
@WebCademy 3 місяці тому
Если у элемента всегда одинаковый размер то и менять его не надо и clamp в таком случае не нужен.
@PhilippJFray 3 місяці тому
@@WebCademy большое спасибо, тоже пришёл к такому выводу)
@michaelkamko 4 місяці тому
Я делаю размер текста и все остальные размеры относительно размеров экрана через переменные. (Тут есть нюансы, касаемо высоты или ширины и горизонтальной и вертикальной ориантации) И все. На любом устройстве красиво. Никаких пикселей и кучи медиазапросов.
@WebCademy 4 місяці тому
Скиньте ссылки на один, два проекта с размерами указанными таким способом. Если можно с макетами. Интересно будет посмотреть. Сюда или в разбор верстки: forms.gle/uzwzyMDKayxamXsd9
@-Vladimir-- 19 днів тому
Пример уже есть, интересно было бы посмотреть?
@michaelkamko 19 днів тому
@@-Vladimir-- примеры не могу показать, так как крипта и анонимность. Обычно делаю % от высоты экрана (по ситуации конечно). Стараюсь никаких "пикселей"
@HappyHippyHome 6 місяців тому
Почему бы не использовать классически устоявшиеся относительные величины, rem, em вместо этого?
@monsherok 6 місяців тому
Они статичные, там будет одна и та же величина шрифта на всех разрешениях, то есть и на пк размер 100 пикселей, и на телефоне, а тут можно и в rem задавать, и в px, но суть в том, что шрифт будет от ширины экрана меняться)
@user-yj2ye2su4k 6 місяців тому
А как сделать выделение тела блока уголком как на видео ? Скажешь как с меня подписка навсегда
@WebCademy 6 місяців тому
Не понял вопрос. Какого блока? Можно тайм-код на котором это происходит. Если в редакторе свернуть/развернуть так в VS Code просто навести на колонку со строками и там будет стрелочка чтобы срыть/раскрыть блок кода.
@user-yj2ye2su4k 6 місяців тому
@@WebCademy11:06 когда например медиа запрос открываешь у тебя от открывающей скобки до закрывающей уголок подсвечивается
@user-yj2ye2su4k 6 місяців тому
@@WebCademy1:06 там также
@WebCademy 6 місяців тому
@@user-yj2ye2su4k Настройка Editor › Bracket Pair Colorization: Enabled
@user-oj4oc4dw4w 5 місяців тому
Привет! Хотел скачать код но там стоит пароль чтоб извлечь из папки .Получается что код не посмотреть ?
@WebCademy 5 місяців тому
Какой пароль? К этому урока нет архива с кодом. О каком архиве вы пишите, скиньте ссылку.
@WebCademy 5 місяців тому
И я никогда не ставлю пароли на архивы с кодом которые выкладываю в общий доступ.
@user-do3or8jr7v 3 місяці тому
Спасибо. Но хорошо было бы узнать обратную ситуацию: к примеру - от 600px до 1200 штрифт не изменяется , но если размер становиться меньше 600px до размер шрифта уменьшаеться, и если становится больше 1200, то шрифт начинает увеличиваться. Это логичнее.
@WebCademy 3 місяці тому
Тогда вам помогут медиа запросы, в сочетании с vw единицами измерения для размера текста.
@user-do3or8jr7v 3 місяці тому
@@WebCademy я так понимаю, то без медиазапросов всё равно никуда не денешься для адаптивной вёрстки?
@WebCademy 3 місяці тому
@@user-do3or8jr7v Да, они все равно нужны.
@user-do3or8jr7v 3 місяці тому
@@WebCademy Обречённость... они же подтормаживают загрузку..
@WebCademy 3 місяці тому
@@user-do3or8jr7v На сколько? Это на грани погрешности работы процессора. И то, я бы сказал что это даже не заметно. P.S. Говорю про нормальную верстку, а не про 100 медиазапросов в одной странице.
@artyrdanilov2791 6 місяців тому
width можно так задавать ?
@WebCademy 6 місяців тому
Можно
@artyrdanilov2791 6 місяців тому
@@WebCademy а как ?
@WebCademy 6 місяців тому
@@artyrdanilov2791 Например так: width: clamp(200px, 20vw, 600px);
@AndrewLaptevCode 6 місяців тому
а можно ли это использовать для чего-то еще кроме font-size?
@WebCademy 6 місяців тому
Да, например для width или height, margin, padding.
@yuritian8830 18 днів тому
не проще написать миксин?
@WebCademy 18 днів тому
Проще чем что? Конечно вместо расчетов каждый раз через онлайн сервис, можно написать миксин с нужными расчетам и использовать его.
@yuritian8830 17 днів тому
@@WebCademy проще, чем вот это вот всё.
@obstb 6 місяців тому
Для етого сервиса нужен еще один сервис чтоби переводть в пиксели, рукалицо
@user-sd2cc3zm9n 6 місяців тому
Спасибо!
BBC News Україна
Переглядів 667 тис.
Алексей Навальный
Переглядів 6 млн
Фрілансер по життю
Переглядів 654 тис.
ВебКадеми | Юрий Ключевский
Переглядів 715