Адаптивное (отзывчивое) CSS свойство. Как быстро адаптировать элементы.
HTML-код
- Опубликовано: 7 июн 2024
- Как быстро адаптировать различные элементы на странице? Спешу поделиться с вами очередным экспериментом. На этот раз решил сделать любое CSS свойство отзывчивым!
💪 Надежный провайдер IT-инфраструктуры Selectel - slc.tl/WS7rU
👉Урок по адаптивной верстке: • Адаптивная вёрстка сай...
👉Урок по адаптивной верстке картинок: • Адаптивные изображения...
👉 Файлы урока: / 44875267
🔴 Получить доступ к плюшкам + поддержать канал: / freelancerlifestyle
🔴 Telegram канал: t.me/freelancer_lifestyle (teleg.run/freelancer_lifestyle)
🔴 Telegram чат по верстке: t.me/flschat (teleg.run/flschat)
🔴 Facebook: / freelancerlifestyle
🔴 Instagram: / freelancer.lifestyle
00:00 - В выпуске
01:29 - РЕКЛАМА - Selectel
02:34 - Исходные данные
03:00 - Отзывчивость внутри контейнера
06:38 - Отзывчивость по всей ширине
09:14 - Отзывчивость за пределами контейнера
10:15 - Заключение
👋 Меня зовут Женя Андриканич, я IT - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками!
Ссылка на канал: / freelancerlifestyle
🤟 Живи, а работай в свободное время! ©
🤟 Крутяк?
🔴 Получить доступ к плюшкам + поддержать канал: www.patreon.com/freelancerlifestyle
🔴 Telegram канал: t.me/freelancer_lifestyle (teleg.run/freelancer_lifestyle)
🔴 Telegram чат по верстке: t.me/flschat (teleg.run/flschat)
🔴 Facebook: facebook.com/freelancerlifestyle
🔴 Instagram: instagram.com/freelancer.lifestyle
Пользуюсь этим свойством еще с видео о адаптивных шрифтах)
Я на моменте с размером шрифта уже был безмерно счастлив, а теперь еще и внешние\внутренние отступы будут адаптивно изменяться в моих работах, ААААААААААААААААААААААА!!
Спасибо огромное!)
Пожалуйста!
Информация на вашем канале самая структурированная, а решения самые лаконичные. Я откинул все остальные источники по верстке и смотрю только Вас. Спасибо!
Я рад! Стараюсь!
Женя, это огонь 🔥
Спасибо что делишься такими наработками
Это большого стоит
Наконец-то реклама!!! Я рад за тебя бро, действительно ждал когда же у тебя появится реклама чтобы ты получал ещё больше профита за все тонны информации которой ты с нами делишься )
Спасибо!
Ай да Жека, ай да... МООДЕЦ! В жизни бы не нашел и не открыл такое. Спасибо за новую фишку!
Айтишники реально ленивые. Неделю потратишь на изобретение такого, зато потом месяц в году сэкономишь )))
А еще эта искренняя радость в голосе. Будто ученый при совершении открытия )
Ахах) спасибо!
Это просто не описать словами, как удобно! Женя, благодарность тебе огромнейшая! Экономия времени - супер!
Добрый день, Евгений! Отличное видео, крутые наработки, подробные обьяснения, понятная подача! Благодарю за эти "фишки" от мастера, за Ваш труд и помощь в обучении профессии! Успехов, интересных заказов и благополучия Вам и Вашей семье!👍🙂
все вещи, которые ты даешь по адаптивной верстке - просто безусловно лучшие в русском сегменте ютуба. огромное тебе спасибо и большущий респект за подобный контент. благодаря тебе я прогрессирую просто с невероятной скоростью!
Женя, прямо сейчас использую в работе, какая же это пушка!!!! 85ый уровень годноты
Я рад!
Привет! Дочитай до конца! Хочешь выучить ин язык? Интересуешься программированием? Видео/Фото монтаж, Инвестициями, Настройкой рекламы? SMM и т.д? У нас самые лучшие платные курсы , абсолютно бесплатно - курсы от skillbox, udemy, gekbrain и т.п. Переходи в наш тг канал - @slivcoursefree
Спасибо за дорогую информацию которую ты вещаешь бесплатно ! Ты хорошее дело делаешь ! Так держать !
Пожалуйста!
Именно это видео принуждало меня подписаться )
У меня нет слов, спасибо, не останавливайся, только вперед!
Жека ты не перестаешь удивлять)))
Это очень крутой и полезный урок, я буду обязательно пользоваться и тебя вспоминать)
Спасибо тебе!
Вот это да, спасибо, Евгений, отличный контент, уже даже не для новичков, а для профи ))
Спасибо!
Calc - крутое свойство! Помню выпуск про адаптивный шрифт, там тоже было это свойство. Это очень полезно, большое спасибо!
Пожалуйста!
Ого!!! Жека, я пока начинаю, ищу лучшие подходы делать адаптив, и, наверное, не осознаю всей годноты этого способа, но похоже это то, что я хоте )) Спасибо огромное за всё, реально ты как человек, как источник лучшего в человеке, знаний без воды в лучшей подаче - это всё ты) Спасибо тебе и твоим родителям!
ААААА словами не выразить как это круто!
Я рад!
Подобное видео уже было, но сейчас формула для шрифта не много изменена и теперь работает отталкиваясь от max и min width, круто !
Да, сейчас более оптимизировано
Как же я люблю такие плюшки😍 спасибо, Жень 🙏
Пожалуйста!
Ты как всегда Крут!!!)
Сегодня же внедрю это себе в шаблон.
Как обычно, захожу, сначала ставлю лайк, потом смотрю.
Потому что твой контент всегда Мега Крутой!)
Спасибо!
Класс , новое видео. Поставлю лайк, но посмотрю потом. Так как все должно быть по порядку. Сейчас изучаю flexbox по вашим урокам.
Супер! Спасибо!
Сколько позитива и задора в изложении материала. Спасибо за такой крутяк.
Пожалуйста!
Круто! На днях ломала голову, как можно адаптировать паддинг, а тут раз, и видео в тему. Женя, спасибо большое!
Пожалуйста!
Как всегда супер полезное видео. Спасибо за контент!
Пожалуйста!
Спасибище огромное за такой полезный урок. Ты крут. Очень мотивируеш учится и не бросать, весь материал очень интересный и не скучный.
Отличное видео! Как только подумал за миксин, так сразу ты и показал) Спасибо.
Пожалуйста!
Евгений - Маэстро! По мне, так ты усовершенствовал написание адаптивности сайтов для нас на 100%. Круто, Спасибо!!!
Кайф. Делал такое подбирая каждый раз коэффициенты на глаз но с формулой пижже! Спасибо!
Нереально крутое и полезное видео🤯 И как же классно смотреть на человека, которому самому в кайф верстка и в кайф рассказывать об этом другим. Заразительная энергия 🙃 Пойду делать адаптив 🤘
Спасибо! Я рад!
Это уже высший класс!))) Крутяк!
Спасибо!
Коротко, ясно, актуально. Большое спасибо!
Нашел эту формулу в интернете и плохо понял что к чему. В этом видео Евгений буквально все разживал. Спасибо большое)
Круто!👍 Спасибо тебе, Жека!
Спасибо!
все ваши виде это лучшее что можно найти на русскоязычном сегменте! Я поддерживаю вас во всём! желаю мира и спокойствия вашей стране и семье
А шо, так можно было? Просто отпад, спасибо за инфу! Главное - не забыть, когда буду верстать)
Пожалуйста!
Отличный способ!)
Как раз искал таблетку для адаптивности
Спасибо!)
Пожалуйста!
Женя, невероятно полезно! огромнейшая благодарность
Как всегда на высоте, друг мой. Спасибо. Эпический лайфхак.
Спасибо!
Как же ты крут, Жека! Спасибо тебе!!!🤗🤗🤗
Это невероятнейше полезная штука. Огромное спасибо! Дико облегчает адаптив ибо сводит на нет написание 100500 медиазапросов. У меня была подобная идея, но пока я бы додумался как реализовать... А тут всего 11 минут, и благодаря тебе я точно понял принцип работы, и не просто скопипастил код, а именно понял.
Круто! Как всегда четко и объяснил! Спасибо!
Женя, ты просто красавчик! Контент высшего уровня! Желаю тебе, чтобы он никогда не терял в качестве)
Это гениально! Спасибо! Я сэкономил кучу времени!
Cao Ženja super je informacija, taman sam učim pomalo crtati sa figme maketi ali razmišljao za adaptiv. Hvala ti brate za top infu))!
Слышал часто от людей, что математика не нужна сейчас в программировании и используется только в каких-то специфических направлениях. И тем более математика не нужна в веб-разработке... ну-ну))) Живой пример, как при помощи математического выражения можно красиво решить задачу адаптации. Автору большое спасибо.
Вернее логики и абстрактного мышления
Пожалуйста!
Математика всегда нужна, там логика и анализ тренируются.
це просто фантастика!!! Ніколи б не додумався, дякую велике!!!
Вау !!! Волшебные формулы пошли !!! Лайк однозначно)))))
Спасибо!
@@FreelancerLifeStyle Тебе спасибо.Здорово помог мне своими видео.
Жека, спасибо, родной. Это офигенная информация!
Это было супер познавательно! Спасибо!
Пожалуйста!
просто вау! Спасибо, Жень
Спасибо!
Бомба! Я влюбился в calc! Спасибо! :)))
Пожалуйста!
Суперский контент, Женя! Класс! Like*1000 Tab !
Спасибо!
Очень понравилось!!! Спасибо!!! Будет полезно!!!
Ничего бесполезного на твоём канале нет, все четко по делу👍 Адаптив всегда актуален
Я рад!
Чудовий контент. Довелось подумати над формулою, але зрештою стало зрозуміло, чому там використані саме ті величини, які використані. Бажаю благословень та мирного неба!
Евгений, спасибо за ваши труды , в интернете ваш канал №1 в этой теме!
Я рад!
Я тож придумал подобную тему с отступами))
Ток у меня формула раза в 2 получилась)
Спасибо за урок), учёл некие моменты, попробую уменьшить свою формулу)
Жека, респект!
Отличный ролик!
Очень ценная наработка, большое спасибо!
Жека, спасибо, это очень крутая метода. Буду пользоваться))0)
СПАСИБО!
Думал сначала что можно как-то пропорционально изменять размеры странницы(масштабировать), но как оказалось нет, в итоге наткнулся на твое видео)
По сути даже можно JS либу написать:)
мое почтение! невероятно круто!
Сначала казалось всё сложно, но по сути это же простейшая математика. Вы вычисляете коэффициент изменения ширины, а точнее масштаб, затем умножаете на разницу между макс и мин, это скорее диапазон изменения величины и прибавляете минимальную величину отступа, т.к. в минимальной точке (320) правое выражение равно 0. Это интересная идея, но самую суть я понял в том, что можно придумывать любые задачи для значений - это действительно круто. Как всегда спасибо большое!
Было бы отличным ещё видео по интеграции вёрстки на популярные CMS, думаю, многих порадует)
Есть миллион таких видео в ютубе, взять
любую cms - можно 10 разными способами натягивать. Если тебе что конкретное надо, то проще самому найти
Как же это круто!!!💥💥💥
Это очень круто , поможет сильно сократить код , большое спасибо :)
Спасибо. Это именно то, что мне нужно
Я рад!
Спасибо, пользуюсь теперь эти постоянно
Женя, ты как всегда лучший!
Сверстал 3 landing page, благодаряю вам, теперь вернулся чтобы узнать как делать адаптив). Хочу заметить что во время прохождения курсов, я просто смотрел (мало практиковался), а когда стоишь перед "!Tab"- ничего не помнишь). Благо то что вы не удаляете обучалки, еще много раз придется возвращаться, чтобы узнать как работает та или иная функция, крч спасибо вам)
Как ты это делаешь? Это видео выходит именно в то время когда прям вот надо и так не первый раз. Я в восторге
Спасибо за такую фичу! Попробовал применить данное свойство к контейнеру, получилось сделать и его адаптивным. Теперь резиновый, без резких прыжков и кучи медиа-запросов...
Просто лучший! Миллион раз спасибо 🙂
Пожалуйста!
Как всегда огонь!!!!🔥🔥🔥👍
Спасибо!
Я смотрю конечно больше ради эмоций Жеки, но это просто космос контент. Спасибо!
Гениально и актуально ! СПАСИБО )!!!
Пожалуйста!
Спасибо! Надо попробовать.
Пожалуйста!
это просто супер круто! обязательно буду использовать
Спасибо!
Жека спасибо за труд🔥🔥🔥🔥
Мега крутое и полезное видео🔥🔥🔥
Уау! Спасибо, очень пригодится)
Ты просто лучший! Спасибо за все!!!
Пожалуйста!
Спасибо за качественный контент!
Пожалуйста!
Жека, ты крут! Одно видео лучше другого
Спасибо!
Нереально круто!
Женя, спасибо огромное!!!!!!!!!!!!!!!!
Начал заниматься по твоим видосам плотненько так, хавал все темы подряд, каждый день верстал, потом заболел на 2 недели и как то забросил все, знал что надо но не хотелось начинать, потом одним утром вышел твой видос как правильно обучаться и тут я снова загорелся.Как бы тебе сказать спасибо чтоб ты понял?)
Очень полезно, спасибо!
Пожалуйста!
Огонь, благодарю!
Пожалуйста!
Чувааак ты гений, респектос, спасибо
Значит задействовал для изменения высоты изображений, с приблизительным сохранением пропорций при адаптиве - работает отлично! СПАСИбо
По картинкам советую ruclips.net/video/nTtuiBXKp88/видео.html
Крутой урок!!!
Ты - просто гений!
Спасибо!
Спасибо Жека. Как всегда быстро, понятно, и главное это работает!!!
Я рад!
Действительно бомбово!!!
Только паро дней нахад увидел такое у инстаграм и гугл. Было интересно как такое делаеться и не знал, у кого спросить, а тут всё есть)
ЛАЙК!!!
Спасибо!
Класс! Женя, респектос, лайк, и коммент длинною более четырёх слов, для продвижения видео в топ! 👍
Спасибо!)
😳 Це просто щось неймовірне. Спасибі.
Евгений, дякую! Очень помогли.
Ты гений, Евгений!!!
Спасибо!)