Тёмный

CSS функция clamp(). Адаптивный размер текста. Прощайте медиазапросы 

ВебКадеми | Юрий Ключевский
Подписаться 54 тыс.
Просмотров 12 тыс.
50% 1

Подробный разбор CSS функции clamp(). Адаптивные размеры в CSS, адаптивный размер текста.
Расчет значений для clamp: min-max-calculator.9elements....
Чат верстальщиков: t.me/+QAxmsKj2HyWfEKzz
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Бесплатный курс "Создай свой первый сайт на HTML5 и CSS3"
От установки редактора, до публикации в сети.
👉 Получить уроки, конспекты, макет и код из уроков: webcademy.ru/htmlsite/
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Курс по созданию и верстке сайтов: webcademy.ru/htmlstart/
Обучение с наставником, 3 месяца, результат, гарантия.
Научим создавать веб-сайты и зарабатывать на этом.
Старт обучения: 01 Июля 2024 года.
💻 Курс "Frontend разработчик. JavaScript + React": webcademy.ru/jscourse/
Обучение с наставником, 3 месяца, результат, гарантия.
Старт обучения: 03 Июня 2024 года.
💻 Курс "Разработка сайтов на PHP + MySQL":
webcademy.ru/phpcourse/
Создание сайтов с системой управления.
Присоединиться к курсу можно прямо сейчас.
🏁 Обучение с нуля
💁‍♂️ Обучение с наставником
🎯 Доведение с нуля до результата
🏢 Помощь с трудоустройством
💵 Поможем взять первый заказ на фрилансе
💳 возможна рассрочка
💳 если курс не понравится, вернём деньги в первую неделю
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💈 Сайт школы ВебКадеми: webcademy.ru/
💈 Вступайте в группу Вконтакте: webcademy
💈 Подписывайтесь на Telegram: t.me/webcademynews

Опубликовано:

 

20 окт 2023

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 63   
@autlady
@autlady 7 месяцев назад
Здорово, спасибо, Юрий, очень полезно ❤
@user-be8dy2lw3n
@user-be8dy2lw3n 4 месяца назад
дай бог здоровья 🤝 очень доступно объясняете
@user-dh7dp1zc3n
@user-dh7dp1zc3n 7 месяцев назад
Отлично. Только вчера интересовался этой темой, потому что надоело на глаз задавать fz для @media. Нашел несколько решений и вот ваше видео.👍
@othersidesss1
@othersidesss1 7 месяцев назад
Как всегда - лучшее обьяснение
@Goddamn_Right
@Goddamn_Right 7 месяцев назад
Дело не в том, что может быть много текста в заголовке, а в том, что при vw высота текста растёт при увеличении ширины окна, а вот высота окна не обязательно вырастет, наоборот, может и уменьшиться. Поэтому заголовок может просто вытеснить другие элементы по высоте и сломать вам дизайн... если он есть)
@user-vn8ud6zn1c
@user-vn8ud6zn1c 7 месяцев назад
как жаль, что на ваше видео я наткнулась только сегодня вчера был дедлайн по главной странице в курсаче и как раз была проблема с масштабированием текста, которую я решила более криво, чем в видео) спасибо!
@svg5359
@svg5359 6 месяцев назад
Отличная, полезная функция. 👍спасибо!
@ringnull
@ringnull 7 месяцев назад
Круто, буду использовать.
@alEL321
@alEL321 7 месяцев назад
Отличная работа!)
@ilyaVnukchinskiy
@ilyaVnukchinskiy 7 месяцев назад
спасибо за нужный и полезный контент
@elenai7001
@elenai7001 7 месяцев назад
Супер! Спасибо❣️
@Anatoli-bq1pe
@Anatoli-bq1pe 4 месяца назад
Благодарю за очень полезное видео!
@senianga1
@senianga1 5 месяцев назад
Это офигенно!
@datoshcode
@datoshcode 7 месяцев назад
Спасибо!
@alexandrs.1706
@alexandrs.1706 7 месяцев назад
Спасибо, как всегда, четко, доступно, понятно.
@YaroslavlCity
@YaroslavlCity Месяц назад
Едва досмотрел, - полез заказчику на сайт применить.
@user-ke5fn6sm8u
@user-ke5fn6sm8u 7 месяцев назад
Круто
@biscvie
@biscvie 6 месяцев назад
👍
@user-oc7cv2nf1n
@user-oc7cv2nf1n 4 месяца назад
А как на производительность страницы влияет clamp()?
@user-nn9qy1yh3s
@user-nn9qy1yh3s 3 месяца назад
Привет, а что это за плагин, который показывает область от открывающего тега до закрывающего ? и что за тема редактора ?
@WebCademy
@WebCademy 3 месяца назад
Настройка VS Code "editor.guides.bracketPairs": "active",
@AlexeyKravets
@AlexeyKravets 7 месяцев назад
А есть видео как такую среду разработки создать и настроить? Пока балуюсь в блокноте, но это только для простых вещей.
@WebCademy
@WebCademy 7 месяцев назад
Да, видео по редактору VS Code ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-942oq0_v95E.html
@PhilippJFray
@PhilippJFray 4 месяца назад
Прохожу обучение сейчас, никак не пойму как правильно использовать эту функцию, мне дали адаптивный макет под разные разрешения и во всех трёх (телефон, планшет, десктоп) в фигме у текста стоит размер в 18пх, каким образом мне нужно подобрать значения для функции что бы менялся размер, ведь минимального и максимального значения я не знаю ?)
@WebCademy
@WebCademy 4 месяца назад
Если у элемента всегда одинаковый размер то и менять его не надо и clamp в таком случае не нужен.
@PhilippJFray
@PhilippJFray 4 месяца назад
@@WebCademy большое спасибо, тоже пришёл к такому выводу)
@Shukhratov
@Shukhratov 6 месяцев назад
Есть ли видео точно также но с блоками дивами картинками?
@WebCademy
@WebCademy 6 месяцев назад
Есть ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-kATSvTqBfPw.html
@Shukhratov
@Shukhratov 6 месяцев назад
@@WebCademy спасибо большое
@michaelkamko
@michaelkamko 5 месяцев назад
Я делаю размер текста и все остальные размеры относительно размеров экрана через переменные. (Тут есть нюансы, касаемо высоты или ширины и горизонтальной и вертикальной ориантации) И все. На любом устройстве красиво. Никаких пикселей и кучи медиазапросов.
@WebCademy
@WebCademy 5 месяцев назад
Скиньте ссылки на один, два проекта с размерами указанными таким способом. Если можно с макетами. Интересно будет посмотреть. Сюда или в разбор верстки: forms.gle/uzwzyMDKayxamXsd9
@-Vladimir--
@-Vladimir-- Месяц назад
Пример уже есть, интересно было бы посмотреть?
@michaelkamko
@michaelkamko Месяц назад
@@-Vladimir-- примеры не могу показать, так как крипта и анонимность. Обычно делаю % от высоты экрана (по ситуации конечно). Стараюсь никаких "пикселей"
@user-ik8sm2th7i
@user-ik8sm2th7i 19 дней назад
@@michaelkamkoа можете поделиться конкретно формулами, пж🙏
@michaelkamko
@michaelkamko 19 дней назад
@@user-ik8sm2th7i формула такая : переменная для обычного текста: 2.4 dvh (2.4 vw для портретной ориентации). Размеры больше: 3.2, 4.8, 6.4 и так далее. Размеры меньше: 1.6, 1,2 (Надеюсь, ничего не напутал)
@HappyHippyHome
@HappyHippyHome 7 месяцев назад
Почему бы не использовать классически устоявшиеся относительные величины, rem, em вместо этого?
@monsherok
@monsherok 7 месяцев назад
Они статичные, там будет одна и та же величина шрифта на всех разрешениях, то есть и на пк размер 100 пикселей, и на телефоне, а тут можно и в rem задавать, и в px, но суть в том, что шрифт будет от ширины экрана меняться)
@user-oj4oc4dw4w
@user-oj4oc4dw4w 6 месяцев назад
Привет! Хотел скачать код но там стоит пароль чтоб извлечь из папки .Получается что код не посмотреть ?
@WebCademy
@WebCademy 6 месяцев назад
Какой пароль? К этому урока нет архива с кодом. О каком архиве вы пишите, скиньте ссылку.
@WebCademy
@WebCademy 6 месяцев назад
И я никогда не ставлю пароли на архивы с кодом которые выкладываю в общий доступ.
@AndrewLaptevCode
@AndrewLaptevCode 7 месяцев назад
а можно ли это использовать для чего-то еще кроме font-size?
@WebCademy
@WebCademy 7 месяцев назад
Да, например для width или height, margin, padding.
@user-do3or8jr7v
@user-do3or8jr7v 4 месяца назад
Спасибо. Но хорошо было бы узнать обратную ситуацию: к примеру - от 600px до 1200 штрифт не изменяется , но если размер становиться меньше 600px до размер шрифта уменьшаеться, и если становится больше 1200, то шрифт начинает увеличиваться. Это логичнее.
@WebCademy
@WebCademy 4 месяца назад
Тогда вам помогут медиа запросы, в сочетании с vw единицами измерения для размера текста.
@user-do3or8jr7v
@user-do3or8jr7v 4 месяца назад
@@WebCademy я так понимаю, то без медиазапросов всё равно никуда не денешься для адаптивной вёрстки?
@WebCademy
@WebCademy 4 месяца назад
@@user-do3or8jr7v Да, они все равно нужны.
@user-do3or8jr7v
@user-do3or8jr7v 4 месяца назад
@@WebCademy Обречённость... они же подтормаживают загрузку..
@WebCademy
@WebCademy 4 месяца назад
​@@user-do3or8jr7v На сколько? Это на грани погрешности работы процессора. И то, я бы сказал что это даже не заметно. P.S. Говорю про нормальную верстку, а не про 100 медиазапросов в одной странице.
@artyrdanilov2791
@artyrdanilov2791 7 месяцев назад
width можно так задавать ?
@WebCademy
@WebCademy 7 месяцев назад
Можно
@artyrdanilov2791
@artyrdanilov2791 7 месяцев назад
@@WebCademy а как ?
@WebCademy
@WebCademy 7 месяцев назад
@@artyrdanilov2791 Например так: width: clamp(200px, 20vw, 600px);
@user-yj2ye2su4k
@user-yj2ye2su4k 7 месяцев назад
А как сделать выделение тела блока уголком как на видео ? Скажешь как с меня подписка навсегда
@WebCademy
@WebCademy 7 месяцев назад
Не понял вопрос. Какого блока? Можно тайм-код на котором это происходит. Если в редакторе свернуть/развернуть так в VS Code просто навести на колонку со строками и там будет стрелочка чтобы срыть/раскрыть блок кода.
@user-yj2ye2su4k
@user-yj2ye2su4k 7 месяцев назад
​@@WebCademy11:06 когда например медиа запрос открываешь у тебя от открывающей скобки до закрывающей уголок подсвечивается
@user-yj2ye2su4k
@user-yj2ye2su4k 7 месяцев назад
​@@WebCademy1:06 там также
@WebCademy
@WebCademy 7 месяцев назад
@@user-yj2ye2su4k Настройка Editor › Bracket Pair Colorization: Enabled
@yuritian8830
@yuritian8830 Месяц назад
не проще написать миксин?
@WebCademy
@WebCademy Месяц назад
Проще чем что? Конечно вместо расчетов каждый раз через онлайн сервис, можно написать миксин с нужными расчетам и использовать его.
@yuritian8830
@yuritian8830 Месяц назад
@@WebCademy проще, чем вот это вот всё.
@obstb
@obstb 7 месяцев назад
Для етого сервиса нужен еще один сервис чтоби переводть в пиксели, рукалицо
@user-sd2cc3zm9n
@user-sd2cc3zm9n 6 месяцев назад
Спасибо!
Далее
Responsive Typography with CSS Clamp
8:37
Просмотров 35 тыс.
CSS3 #22 Медиазапросы (Media queries)
8:19