До этого видео у меня были вопросы по media-запросам, не очень была понятна разница между mobile first и desktop first. Оказалось, что не так и сложно. Спасибо, Анна.
При desktop first ты начинаешь верстать с компьютерной версии, а на все меньшие разрешения ты ставишь брейкпоинты. При mobail first наоборот, без брейпоинтов только самое меньшее разрешение. Считается, что удобнее верстать с меньшего размера экрана, постепенно добавляя новые элементы, а не скрывая их, как при desktop first
Это уж точно не замена, максимум для верстки резиновых макетов. Потом "внезапно" в медиазапросе будет эта же функция но с другими значениями. А еще свойства не с числовыми значенями говорят привет. Просто теперь вместо связки min-width, max-width, width можно выбрать нужную функцию и всё. Как фича для упрощения "резиновости" однозначно да, как замена запросам - нет.
Никто не говорит про полную замену брейкпоинтам - только про их уменьшение! Ну представь ты сверстал блок, а на меньшем разрешении он не влезает, приходится всем его элементам ставить значения под все брейкпоинты. А так ОДИН раз ты прописал эту функцию - и не надо так много брейкпоинтов ставить. Все элементы сохраняют пропорции макета. Как-то так
@@WERWOLION мы же верстаем не только контейнеры, да и как минимум в видео пример того о чем я говорю а еще есть всякие эсайды, слайдауты к примеру которым прекрасно подойдут эти функции
@@IgorBobyrev мой комент больше к кликбейтному названию ролика. А воообще есть такие дизайны и клиенты которые не предполагают резиновости, есть дизайн под разные форматы устройств будьте добры использовать величины из него. Сейчас речь о, допустим, отступах в карточках, размерах шрифто, где каждый третий верстак сует какие-то расчеты от ширины экрана. А потом приходит тестировщик и выписывает это все как баги потому что этого нет в требованиях и это не нужно
@@romatokar3516 нет потому что используется давно контрукт на миксинах. А это вчерашний век. И вешается это дело на размер шрифта контейнера оболочки. А размеры в 90% случаях задавать нельзя
Мне кажется медиазапросы более читабельны. Со значениями 50%, 25% max, min еще куда не шло. Но при условных 13%, 42% и т.д., сидеть и высчитывать с калькулятором, это выглядит как лишний геморой. Вот clamp действительно крутая функция, ее уже применяю
Эта новая функция позволяет обойтись без лишних брейкпоинтов, а их может быть много, больше чем два-три, если макет сложный. Для каждого элемента (а их могут быть десятки) прописывать поведение под каждое разрешение - гемор большой
Мы понимаем формулу и другим образом, второе значение в пикселях составляет процент от исходного, выраженное в первом значении. То есть 200/0,5 = 400. Весьма забубенистая штука, что там по поддержке движков.
мне канал очень нравится он познавательный интересный узнает всегда что то интересное спасибо вам большое за такой интересный познавательный канал буду рекомендовать своим друзьям знакомым близким
это замечательно что можно не использовать медиа запрос, но дебажить подобные вещи и искать в каком месте происходить изменение элемента вот это будет задача. потому что на практике без медиа запросов просто не обойтись, а миксовать два разных подхода в адаптиве это плохая практика. но можете закидать меня помидорами )
Плохо ничего нет, но порой совершается ошибка и таких медиа-запросов появляется много из-за того, что используются не те единицы измерения или методы, которые вынуждают включить лишний медиа-запрос, без которого можно было бы обойтись
Всегда нужно быть в курсе событий, спасибо что помогаете
это верно в курсе событий нужно быть всегда
У вас доходчивые и понятные уроки. Главное любить свою работу и будет всё с лёгкостью получаться. В наше время, веб разработки очень важны.
спасибо, ты мне очень помогла, желаю тебе удачи, ты очень умная и красивая, таких девушек мало, береги себя, еще раз спасибо, умница 😉☺
До этого видео у меня были вопросы по media-запросам, не очень была понятна разница между mobile first и desktop first. Оказалось, что не так и сложно. Спасибо, Анна.
При desktop first ты начинаешь верстать с компьютерной версии, а на все меньшие разрешения ты ставишь брейкпоинты. При mobail first наоборот, без брейпоинтов только самое меньшее разрешение. Считается, что удобнее верстать с меньшего размера экрана, постепенно добавляя новые элементы, а не скрывая их, как при desktop first
Спасибо за информацию. Очень полезная штука. Раньше как то даже и не задумывалась об этом. Полезное видео
спасибо, что так развернуто и понятно рассказываете важные технические моменты в создании сайтов, с вами стала разбираться в этой теме
Отличное видео, очень понятно даже для начинающих, которые раньше не знали вообще что такое вёрстка. Очень доступно.
Спасибо за советы специалиста, с помощью вас начала намного лучше разбираться в сайтах и их созданию👍
Спасибо за информацию. Я согласна с вашимы выводами .
Отлично , что вы так хорошо рассказуте про такую полезную тематику
Спасибо вам за этот подробный видео обзор.
Все довольно подробно и понятно. Просто это такая малость от того, что надо знать!))
Спасибо за ваши советы, прекрасно всё объяснили👍💯
Это не заменит media запросы.
конечно не заменит, ведь медиа запросы решают множество других задач, а не только размеры элементов
Интересные функции. Значительно упростит процесс. Спасибо за инфу
Те функции что облегчают работу мне нравятся больше всего, надо запомнить
Благодарю за очень интересное видео просмотрел и прослушал с большим интересом всё очень чётко рассказала.
Однозначно очень полезная тема, в которой благодаря вашему видео я разобралась.
Возможно стоит провести короткий лайф стрим с версткой одностаничника который содержит все эти новые функции😅
В ближайших планах есть выпуск с clamp(), но можно было и max() и min() туда попробовать внедрить. Неплохая идея 👍
Согласен с Вами . стрим . на стриме более подробнее можно понять всю суть.
👍
Это уж точно не замена, максимум для верстки резиновых макетов. Потом "внезапно" в медиазапросе будет эта же функция но с другими значениями. А еще свойства не с числовыми значенями говорят привет. Просто теперь вместо связки min-width, max-width, width можно выбрать нужную функцию и всё. Как фича для упрощения "резиновости" однозначно да, как замена запросам - нет.
min-width, max-width
используются для других целей
потому что контейнерам нельзя задавать размеры
Никто не говорит про полную замену брейкпоинтам - только про их уменьшение! Ну представь ты сверстал блок, а на меньшем разрешении он не влезает, приходится всем его элементам ставить значения под все брейкпоинты. А так ОДИН раз ты прописал эту функцию - и не надо так много брейкпоинтов ставить. Все элементы сохраняют пропорции макета. Как-то так
@@WERWOLION мы же верстаем не только контейнеры, да и как минимум в видео пример того о чем я говорю а еще есть всякие эсайды, слайдауты к примеру которым прекрасно подойдут эти функции
@@IgorBobyrev мой комент больше к кликбейтному названию ролика. А воообще есть такие дизайны и клиенты которые не предполагают резиновости, есть дизайн под разные форматы устройств будьте добры использовать величины из него. Сейчас речь о, допустим, отступах в карточках, размерах шрифто, где каждый третий верстак сует какие-то расчеты от ширины экрана. А потом приходит тестировщик и выписывает это все как баги потому что этого нет в требованиях и это не нужно
@@romatokar3516 нет потому что используется давно контрукт на миксинах.
А это вчерашний век.
И вешается это дело на размер шрифта контейнера оболочки.
А размеры в 90% случаях задавать нельзя
Весьма интересное предложение. Надо пробовать.
спасибо все подробно и доступным языком рассказали и показали
Мне кажется медиазапросы более читабельны. Со значениями 50%, 25% max, min еще куда не шло. Но при условных 13%, 42% и т.д., сидеть и высчитывать с калькулятором, это выглядит как лишний геморой. Вот clamp действительно крутая функция, ее уже применяю
Эта новая функция позволяет обойтись без лишних брейкпоинтов, а их может быть много, больше чем два-три, если макет сложный. Для каждого элемента (а их могут быть десятки) прописывать поведение под каждое разрешение - гемор большой
@@IgorBobyrev возможно
@@IgorBobyrevсогласен, хотелось бы заранее закладывать адаптив элементам в css, до написания брекпоинтов
очень полезное и продуктивное видео получилось, супер)
ТЫ просто лучшая тебя смотреть одно удовольствие
Спасибо, инфа топ
Такая красивая и шарит в сайтах и кодах, умничка ведь Аннют
Первый закон юзабилити: "Не заставляйте меня думать!"
Классное видео мне очень нравится спасибо большое автору
Как потрясающая новость! Развитие в области адаптивного дизайна без @media - это шаг вперёд в удобстве и доступности веб-разработки.
Цікаве відео. Думаю, на сьогоднішній день тема адаптивного сайту дуже потрібна.
вот как нужно обьяснять, быстро и понятно , без лишней воды.
Мы понимаем формулу и другим образом, второе значение в пикселях составляет процент от исходного, выраженное в первом значении. То есть 200/0,5 = 400. Весьма забубенистая штука, что там по поддержке движков.
Awesome work 👏
А может быть, что использование этих функций будет замедлять сайт, так как браузер будет всё сситать
Новички тоже бывают разные. Подходит ли курс для абсолютных новичков?
Да, подходит. Курс специально рассчитан на тех, кто нигде этому не учился.
Это же можно сразу секции задавать значение Макс размера при котором она не будет тянуться))) то есть по бокам будут ушки добавляться))
Типа отказаться от контейнера получается)
мне канал очень нравится он познавательный интересный узнает всегда что то интересное спасибо вам большое за такой интересный познавательный канал буду рекомендовать своим друзьям знакомым близким
this is an amazing and really very nice
размер блока изменился, а как быть со шрифтами? они через медиа или есть какая фишка?
Симпатичная милая девочка с голубыми глазками. Кукольная внешность.)
И в чем преимущество такого метода перед теми же медиа-запросами?
А зачем это вообще нужно, если можно использовать, например, сетку бутстрап? И в чем преимущество такого метода перед теми же медиа-запросами?
Девушка, ви молодец
Может привычка но media как-то очевиднее, что ли.
Сила привычки
эти функции меняют лишь размеры элемента
Это хорошая идея,только когда будет в действии.
Зачем такой кликбейтный заголовок? Ты даже не коснулась темы как обойтись без @media. И прекрасно знаешь, что в большинстве случае это невозможно.
Эх, и зачем такой кликбейт делать. Кому нужен адаптивный сайт с одним брейкпоинтом, так еще и кастрированным?
Кликбейтный заголовок, тьфу...
это замечательно что можно не использовать медиа запрос, но дебажить подобные вещи и искать в каком месте происходить изменение элемента вот это будет задача. потому что на практике без медиа запросов просто не обойтись, а миксовать два разных подхода в адаптиве это плохая практика. но можете закидать меня помидорами )
Так вроде в инспекторе можно посмотреть css код и в какой строке, однако согласен что несколько подходов совмещать неудобно.
Адаптивный дизайн помогает правильно отображать размеры сайта на различных устройствах...
А не проще создать обычный одностраничный сайт и не париться сложными веб алгоритмами?
Я новичок, не могли бы вы объяснить мне, что плохого в медиазапросах?
Плохо ничего нет, но порой совершается ошибка и таких медиа-запросов появляется много из-за того, что используются не те единицы измерения или методы, которые вынуждают включить лишний медиа-запрос, без которого можно было бы обойтись
@@annblok_webdev спасибо за ответ, попробую осмыслить
min(50%, 200px) - это:
width: 50%;
max-width: 200px
Не?😂
Ну уже считай одна строка вместо двух)
Krasavitca
Уже не обойтись без этого, и оно входит во все как бы справочники , наверно
Если скомбинировать с кальком и считать не нужно будет ничего)
ну такое
какое?
очень ситуитивная фича...
нельзя , в макет не попадёшь
Аня можно 0,5 часов твоего бесценного времени. Есть важный разговор.
На це все вже мають бути хороші шаблони
зайди к блогерам посмотри как правильно красится а то шпакли накидала, невозможно смотреть на такое лицо
не учи говнокодить, @media не только для ограничений по ширине экрана...
Сейчас вроде как Vite рулит.
При чем тут Vite и адаптив сайтов??????
@@yurok1991Она в своём курсе показывает вебпак. Это я к нему написал. В целом к видео не относится.