Адаптивное (отзывчивое) CSS свойство. Как быстро адаптировать элементы.

Поділитися
Вставка
  • Опубліковано 25 вер 2024

КОМЕНТАРІ • 474

  • @FreelancerLifeStyle
    @FreelancerLifeStyle  3 роки тому +38

    🤟 Крутяк?
    🔴 Получить доступ к плюшкам + поддержать канал: 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

    • @AlexeyKhachaturyan
      @AlexeyKhachaturyan 3 роки тому

      Пользуюсь этим свойством еще с видео о адаптивных шрифтах)

  • @kotlancer
    @kotlancer 3 роки тому +42

    Я на моменте с размером шрифта уже был безмерно счастлив, а теперь еще и внешние\внутренние отступы будут адаптивно изменяться в моих работах, ААААААААААААААААААААААА!!
    Спасибо огромное!)

  • @magnosierra8291
    @magnosierra8291 3 роки тому +13

    Информация на вашем канале самая структурированная, а решения самые лаконичные. Я откинул все остальные источники по верстке и смотрю только Вас. Спасибо!

  • @ДмитрийЯ-з2д
    @ДмитрийЯ-з2д 3 роки тому +20

    Ай да Жека, ай да... МООДЕЦ! В жизни бы не нашел и не открыл такое. Спасибо за новую фишку!
    Айтишники реально ленивые. Неделю потратишь на изобретение такого, зато потом месяц в году сэкономишь )))
    А еще эта искренняя радость в голосе. Будто ученый при совершении открытия )

  • @mediocrity3513
    @mediocrity3513 3 роки тому +30

    Наконец-то реклама!!! Я рад за тебя бро, действительно ждал когда же у тебя появится реклама чтобы ты получал ещё больше профита за все тонны информации которой ты с нами делишься )

  • @mickzc7064
    @mickzc7064 3 роки тому +29

    Спасибо за дорогую информацию которую ты вещаешь бесплатно ! Ты хорошее дело делаешь ! Так держать !

  • @AnastasiyaMajid
    @AnastasiyaMajid 3 роки тому +36

    ААААА словами не выразить как это круто!

  • @roman-_-novikov
    @roman-_-novikov 3 роки тому +8

    Слышал часто от людей, что математика не нужна сейчас в программировании и используется только в каких-то специфических направлениях. И тем более математика не нужна в веб-разработке... ну-ну))) Живой пример, как при помощи математического выражения можно красиво решить задачу адаптации. Автору большое спасибо.

    • @IhorVasilchenko
      @IhorVasilchenko 3 роки тому +1

      Вернее логики и абстрактного мышления

    • @FreelancerLifeStyle
      @FreelancerLifeStyle  3 роки тому

      Пожалуйста!

    • @natalybellini915
      @natalybellini915 3 роки тому +2

      Математика всегда нужна, там логика и анализ тренируются.

  • @kotlancer
    @kotlancer 3 роки тому +18

    Женя, прямо сейчас использую в работе, какая же это пушка!!!! 85ый уровень годноты

    • @FreelancerLifeStyle
      @FreelancerLifeStyle  3 роки тому

      Я рад!

    • @happybet228
      @happybet228 3 роки тому

      Привет! Дочитай до конца! Хочешь выучить ин язык? Интересуешься программированием? Видео/Фото монтаж, Инвестициями, Настройкой рекламы? SMM и т.д? У нас самые лучшие платные курсы , абсолютно бесплатно - курсы от skillbox, udemy, gekbrain и т.п. Переходи в наш тг канал - @slivcoursefree

  • @grimera1937
    @grimera1937 3 роки тому +5

    Подобное видео уже было, но сейчас формула для шрифта не много изменена и теперь работает отталкиваясь от max и min width, круто !

  • @khalilmutallibov
    @khalilmutallibov 3 роки тому +7

    Calc - крутое свойство! Помню выпуск про адаптивный шрифт, там тоже было это свойство. Это очень полезно, большое спасибо!

  • @TheDaemonL
    @TheDaemonL 3 роки тому +6

    все вещи, которые ты даешь по адаптивной верстке - просто безусловно лучшие в русском сегменте ютуба. огромное тебе спасибо и большущий респект за подобный контент. благодаря тебе я прогрессирую просто с невероятной скоростью!

  • @cheesecheesson9842
    @cheesecheesson9842 3 роки тому +11

    Вот это да, спасибо, Евгений, отличный контент, уже даже не для новичков, а для профи ))

  • @ЮраМитрофанов-к4я
    @ЮраМитрофанов-к4я 3 роки тому +10

    Женя, это огонь 🔥
    Спасибо что делишься такими наработками
    Это большого стоит

  • @ruvick1776
    @ruvick1776 3 роки тому +4

    Ты как всегда Крут!!!)
    Сегодня же внедрю это себе в шаблон.
    Как обычно, захожу, сначала ставлю лайк, потом смотрю.
    Потому что твой контент всегда Мега Крутой!)

  • @svetlanapokrovskaya7798
    @svetlanapokrovskaya7798 3 роки тому +3

    Круто! На днях ломала голову, как можно адаптировать паддинг, а тут раз, и видео в тему. Женя, спасибо большое!

  • @grs204_
    @grs204_ 3 роки тому +4

    Класс , новое видео. Поставлю лайк, но посмотрю потом. Так как все должно быть по порядку. Сейчас изучаю flexbox по вашим урокам.

  • @imakhnoo
    @imakhnoo 3 роки тому +18

    Было бы отличным ещё видео по интеграции вёрстки на популярные CMS, думаю, многих порадует)

    • @Sergey-uz1sz
      @Sergey-uz1sz 2 роки тому

      Есть миллион таких видео в ютубе, взять
      любую cms - можно 10 разными способами натягивать. Если тебе что конкретное надо, то проще самому найти

  • @СветланаСавина-й3и
    @СветланаСавина-й3и 2 роки тому +2

    Это просто не описать словами, как удобно! Женя, благодарность тебе огромнейшая! Экономия времени - супер!

  • @ВладиславДобриця
    @ВладиславДобриця 3 роки тому +3

    А шо, так можно было? Просто отпад, спасибо за инфу! Главное - не забыть, когда буду верстать)

  • @deevue_sews
    @deevue_sews 3 роки тому +4

    Жека ты не перестаешь удивлять)))
    Это очень крутой и полезный урок, я буду обязательно пользоваться и тебя вспоминать)
    Спасибо тебе!

  • @alkushchik
    @alkushchik 3 роки тому +6

    Круто!👍 Спасибо тебе, Жека!

  • @olegsemenukha4107
    @olegsemenukha4107 3 роки тому +6

    Бомба! Я влюбился в calc! Спасибо! :)))

  • @alexandrx1237
    @alexandrx1237 3 роки тому +4

    Отличный способ!)
    Как раз искал таблетку для адаптивности
    Спасибо!)

  • @ARTEMIUSFOLIO
    @ARTEMIUSFOLIO 3 роки тому +5

    Это уже высший класс!))) Крутяк!

  • @Pug.is_cool.m
    @Pug.is_cool.m 3 роки тому +5

    Спасибо. Это именно то, что мне нужно

  • @rustyspc9046
    @rustyspc9046 3 роки тому +5

    Как всегда супер полезное видео. Спасибо за контент!

  • @shukonfadah5725
    @shukonfadah5725 2 роки тому

    все ваши виде это лучшее что можно найти на русскоязычном сегменте! Я поддерживаю вас во всём! желаю мира и спокойствия вашей стране и семье

  • @b_fegi
    @b_fegi 3 роки тому +14

    Посмотрю позже! Зашел поставить лайк, полюбому годный видос)

  • @vitamax3777
    @vitamax3777 3 роки тому +3

    просто вау! Спасибо, Жень

  • @ДарьяАрсеньева-х9и
    @ДарьяАрсеньева-х9и 3 роки тому +2

    Как же я люблю такие плюшки😍 спасибо, Жень 🙏

  • @саксасксон
    @саксасксон 3 роки тому +1

    Вау !!! Волшебные формулы пошли !!! Лайк однозначно)))))

  • @ОлегСелин-ш9ы
    @ОлегСелин-ш9ы 3 роки тому +1

    Неплохо! Функцию можно чуть адаптировать. Тот же вьюпорт с разницей минимальной ширины, вынести в кастомное свойство

    • @FreelancerLifeStyle
      @FreelancerLifeStyle  3 роки тому

      да, конечно. просто нужно было показать как все устроено.

  • @igorpodolskyi1308
    @igorpodolskyi1308 3 роки тому +2

    Отличное видео! Как только подумал за миксин, так сразу ты и показал) Спасибо.

  • @goodirkutsk
    @goodirkutsk 3 роки тому +1

    Ничего бесполезного на твоём канале нет, все четко по делу👍 Адаптив всегда актуален

  • @tazorprod.934
    @tazorprod.934 Рік тому

    Нашел эту формулу в интернете и плохо понял что к чему. В этом видео Евгений буквально все разживал. Спасибо большое)

  • @МарусяКіс
    @МарусяКіс 2 роки тому +2

    я вже не дочекаюсь коли я пройду всі навчальні відео і буду іти в ногу з новими випусками🤩

  • @shurik8252
    @shurik8252 3 роки тому

    Сначала казалось всё сложно, но по сути это же простейшая математика. Вы вычисляете коэффициент изменения ширины, а точнее масштаб, затем умножаете на разницу между макс и мин, это скорее диапазон изменения величины и прибавляете минимальную величину отступа, т.к. в минимальной точке (320) правое выражение равно 0. Это интересная идея, но самую суть я понял в том, что можно придумывать любые задачи для значений - это действительно круто. Как всегда спасибо большое!

  • @proquiz2308
    @proquiz2308 Рік тому

    Я смотрю конечно больше ради эмоций Жеки, но это просто космос контент. Спасибо!

  • @yamixa-gz
    @yamixa-gz 3 роки тому +5

    Спасибо Жека. Как всегда быстро, понятно, и главное это работает!!!

  • @СашаТюменцев-ш9ь
    @СашаТюменцев-ш9ь 2 роки тому

    це просто фантастика!!! Ніколи б не додумався, дякую велике!!!

  • @AbraKadabra000
    @AbraKadabra000 3 роки тому

    Кайф. Делал такое подбирая каждый раз коэффициенты на глаз но с формулой пижже! Спасибо!

  • @tochcha2971
    @tochcha2971 3 роки тому +2

    Спасибо, пользуюсь теперь эти постоянно

  • @developer8112
    @developer8112 3 роки тому

    Спасибо за такую фичу! Попробовал применить данное свойство к контейнеру, получилось сделать и его адаптивным. Теперь резиновый, без резких прыжков и кучи медиа-запросов...

  • @ОльгаЛитвинова-ж8ш

    Добрый день, Евгений! Отличное видео, крутые наработки, подробные обьяснения, понятная подача! Благодарю за эти "фишки" от мастера, за Ваш труд и помощь в обучении профессии! Успехов, интересных заказов и благополучия Вам и Вашей семье!👍🙂

  • @nikolaylesko2175
    @nikolaylesko2175 3 роки тому

    Значит задействовал для изменения высоты изображений, с приблизительным сохранением пропорций при адаптиве - работает отлично! СПАСИбо

    • @FreelancerLifeStyle
      @FreelancerLifeStyle  3 роки тому +1

      По картинкам советую ua-cam.com/video/nTtuiBXKp88/v-deo.html

  • @gritsienkooleg3447
    @gritsienkooleg3447 2 роки тому

    Ого!!! Жека, я пока начинаю, ищу лучшие подходы делать адаптив, и, наверное, не осознаю всей годноты этого способа, но похоже это то, что я хоте )) Спасибо огромное за всё, реально ты как человек, как источник лучшего в человеке, знаний без воды в лучшей подаче - это всё ты) Спасибо тебе и твоим родителям!

  • @ivanborysenko3043
    @ivanborysenko3043 3 роки тому +3

    Супер!

  • @denisvolkov4784
    @denisvolkov4784 2 роки тому

    Это невероятнейше полезная штука. Огромное спасибо! Дико облегчает адаптив ибо сводит на нет написание 100500 медиазапросов. У меня была подобная идея, но пока я бы додумался как реализовать... А тут всего 11 минут, и благодаря тебе я точно понял принцип работы, и не просто скопипастил код, а именно понял.

  • @КадырЕржан
    @КадырЕржан 3 роки тому

    Именно это видео принуждало меня подписаться )
    У меня нет слов, спасибо, не останавливайся, только вперед!

  • @SG-li3qv
    @SG-li3qv 2 роки тому

    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))!

  • @chuvital
    @chuvital 3 роки тому +3

    Спасибо! Надо попробовать.

  • @РоманШевченко-ч4ы
    @РоманШевченко-ч4ы 3 роки тому +1

    Как всегда на высоте, друг мой. Спасибо. Эпический лайфхак.

  • @franticf2548
    @franticf2548 4 місяці тому

    😳 Це просто щось неймовірне. Спасибі.

  • @ТетянаПересипкіна

    Сколько позитива и задора в изложении материала. Спасибо за такой крутяк.

  • @harpeter9752
    @harpeter9752 2 роки тому

    Чудовий контент. Довелось подумати над формулою, але зрештою стало зрозуміло, чому там використані саме ті величини, які використані. Бажаю благословень та мирного неба!

  • @andreiognev1426
    @andreiognev1426 9 місяців тому

    Женя, ты как всегда лучший!

  • @Fender_60
    @Fender_60 3 роки тому

    Спасибище огромное за такой полезный урок. Ты крут. Очень мотивируеш учится и не бросать, весь материал очень интересный и не скучный.

  • @Faradenza-sb3mj
    @Faradenza-sb3mj Рік тому

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum,Просто продвигаю видео, спасибо автору за очень позновательный контент.

  • @Сергей-ю8и1х
    @Сергей-ю8и1х 3 роки тому

    Евгений - Маэстро! По мне, так ты усовершенствовал написание адаптивности сайтов для нас на 100%. Круто, Спасибо!!!

  • @berdinazaryazmuhammedov8750
    @berdinazaryazmuhammedov8750 2 роки тому

    Сверстал 3 landing page, благодаряю вам, теперь вернулся чтобы узнать как делать адаптив). Хочу заметить что во время прохождения курсов, я просто смотрел (мало практиковался), а когда стоишь перед "!Tab"- ничего не помнишь). Благо то что вы не удаляете обучалки, еще много раз придется возвращаться, чтобы узнать как работает та или иная функция, крч спасибо вам)

  • @tzkmqptjpjxjks
    @tzkmqptjpjxjks 3 роки тому +2

    Крутяк 🚀

  • @cikada3398
    @cikada3398 3 роки тому

    СПАСИБО!
    Думал сначала что можно как-то пропорционально изменять размеры странницы(масштабировать), но как оказалось нет, в итоге наткнулся на твое видео)
    По сути даже можно JS либу написать:)

  • @zhydachivteamlonely6454
    @zhydachivteamlonely6454 3 роки тому

    Только паро дней нахад увидел такое у инстаграм и гугл. Было интересно как такое делаеться и не знал, у кого спросить, а тут всё есть)
    ЛАЙК!!!

  • @ElevateSphere
    @ElevateSphere 2 роки тому

    Это гениально! Спасибо! Я сэкономил кучу времени!

  • @hidenkron8932
    @hidenkron8932 3 роки тому +2

    Жека, крутяк. Вообще калки это новый мир! Очень своевременно, добиваю java и начинаю делать портфолио. А адаптивные элементы очень сильно мне в этом помогут. Чмоки в щеки

    • @FreelancerLifeStyle
      @FreelancerLifeStyle  3 роки тому

      Спасибо))

    • @hidenkron8932
      @hidenkron8932 3 роки тому

      @@FreelancerLifeStyle ты ещё когда про шрифты видео выложил, я посмотрел и подумал, что эту тему можно на многие свва переложить. Собирался поковыряться после явы, а ты возьми и на блюдичке... Золото, а не человек

  • @ankavery
    @ankavery 3 роки тому +3

    Безусловно очень полезное свойство, я его постоянно применяю в проектах. Единственное, в миксин я бы добавил пятым параметром, единицы измерения, т.к. иногда возникает необходимость адаптировать значения, заданные например в процентах или градусах.

    • @FreelancerLifeStyle
      @FreelancerLifeStyle  3 роки тому

      Круть!

    • @ii-yj5qj
      @ii-yj5qj 2 роки тому

      @@FreelancerLifeStyle подскажи пож-ста как запретить значениям увеличиваться когда мы растягиваем экран?

  • @ruslankrasnov732
    @ruslankrasnov732 2 роки тому +1

    Как же это круто!!!💥💥💥

  • @elina-vecherova
    @elina-vecherova 3 роки тому

    Нереально крутое и полезное видео🤯 И как же классно смотреть на человека, которому самому в кайф верстка и в кайф рассказывать об этом другим. Заразительная энергия 🙃 Пойду делать адаптив 🤘

  • @azimshafayziyev3379
    @azimshafayziyev3379 3 роки тому +6

    Спасибо за хороший контент. Можешь сделать ролик про CMS?

  • @КириллТимофеев-п1л
    @КириллТимофеев-п1л 3 роки тому +4

    Даже рекламу посмотрел) Лайк за видео!

  • @oOcitizenOo
    @oOcitizenOo 3 роки тому +2

    Это было супер познавательно! Спасибо!

  • @techno-tramp
    @techno-tramp Рік тому

    Спасибо, потрясающая штука. Позволю себе одну ремарку, реализовав через функцию а не миксин применение будет более лаконичным.

    • @bake5448
      @bake5448 Рік тому

      можете поделиться ?

  • @nikolakoval7294
    @nikolakoval7294 3 роки тому +1

    это просто супер круто! обязательно буду использовать

  • @andygr1n1
    @andygr1n1 3 роки тому

    Коротко, ясно, актуально. Большое спасибо!

  • @gfmusic8117
    @gfmusic8117 3 роки тому

    Я тож придумал подобную тему с отступами))
    Ток у меня формула раза в 2 получилась)
    Спасибо за урок), учёл некие моменты, попробую уменьшить свою формулу)

  • @andreiribac6284
    @andreiribac6284 3 роки тому +1

    мое почтение! невероятно круто!

  • @evdokimova-olga
    @evdokimova-olga 3 роки тому +2

    Крутоо!!!! Спасибо!!!!

  • @ЕвгенийКравцов-ы6д

    Евгений, спасибо за ваши труды , в интернете ваш канал №1 в этой теме!

  • @queenstars2112
    @queenstars2112 3 роки тому +1

    Суперский контент, Женя! Класс! Like*1000 Tab !

  • @Polter-jk1tp
    @Polter-jk1tp 3 роки тому +1

    Ты просто лучший! Спасибо за все!!!

  • @Yana_Kibka
    @Yana_Kibka Рік тому

    Нереально круто!

  • @luxarmiger5729
    @luxarmiger5729 3 роки тому

    Жека, спасибо, родной. Это офигенная информация!

  • @DubinArtur
    @DubinArtur 3 роки тому +1

    Классная штука, надо ещё поискать способ коротко занести это в переменную, чтобы не засорять код дублированием

  • @amysha149
    @amysha149 3 роки тому

    Как же ты крут, Жека! Спасибо тебе!!!🤗🤗🤗

  • @alinahoncharenko6296
    @alinahoncharenko6296 3 роки тому

    Женя, невероятно полезно! огромнейшая благодарность

  • @WebDev_51
    @WebDev_51 3 роки тому +1

    Жека, ты крут! Одно видео лучше другого

  • @dominikeffect9052
    @dominikeffect9052 3 роки тому +1

    ты бог ей богу это ЛУЧШИЙ КОНТЕНТ ГОСПОДИ!!!!!!!!!!!!!!!!!! ЧТО ЗА МУ***ЧЬЕ СТАВИТ ДИЗЛАЙКИ???????????????????????

  • @КамильАлиметов
    @КамильАлиметов 3 роки тому +1

    Просто лучший! Миллион раз спасибо 🙂

  • @ГлебДубровский-д6ъ
    @ГлебДубровский-д6ъ 3 роки тому +1

    Как всегда огонь!!!!🔥🔥🔥👍

  • @sashnevski
    @sashnevski 3 роки тому +1

    Ты гений, Евгений!!!

  • @VovaEnt
    @VovaEnt 3 роки тому +1

    Огонь, благодарю!

  • @motogonkin
    @motogonkin 3 роки тому

    Начал заниматься по твоим видосам плотненько так, хавал все темы подряд, каждый день верстал, потом заболел на 2 недели и как то забросил все, знал что надо но не хотелось начинать, потом одним утром вышел твой видос как правильно обучаться и тут я снова загорелся.Как бы тебе сказать спасибо чтоб ты понял?)

  • @baummm_9315
    @baummm_9315 3 роки тому

    Это очень круто , поможет сильно сократить код , большое спасибо :)

  • @twobytwo9440
    @twobytwo9440 3 роки тому +1

    Наконец-то вышла долгожданная тема на свет, спасибо вам!

  • @artem_ka3863
    @artem_ka3863 3 роки тому

    Очень понравилось!!! Спасибо!!! Будет полезно!!!

  • @ЕгорКривошеин-е5ю
    @ЕгорКривошеин-е5ю 3 роки тому

    Круто! Как всегда четко и объяснил! Спасибо!

  • @Pyoksen
    @Pyoksen 3 роки тому

    Как ты это делаешь? Это видео выходит именно в то время когда прям вот надо и так не первый раз. Я в восторге

  • @АннаМорозевская
    @АннаМорозевская 2 роки тому

    Очень ценная наработка, большое спасибо!

  • @5555Elenka
    @5555Elenka 3 роки тому

    Гениально и актуально ! СПАСИБО )!!!