Теперь точно АДАПТИВ САЙТА можно делать без @media 👍

Подписаться 102 тыс.

Просмотров 20 тыс.

50% 1

🔥 Скидка 15% на курсы по верстке сайтов на платформе FrontendBlok
✅ Оставьте заявку для получения скидки: forms.gle/fEG1GThf3x2qFh4m9
⚡️ А еще вы можете увеличить размер скидки, если взять несколько курсов сразу:
- за покупку 2х курсов скидка 20%
- за покупку 3х курсов скидка 25%
- за покупку 4х курсов скидка 30%
Оставленная заявка ни к чему вас не обязывает, но так у вас будет возможность сделать обучение максимально выгодным.
Таймкоды:
00:00 Вступление
00:30 Скидка на курсы FrontendBlok
01:14 Теория
01:32 Функция min() в CSS
02:47 Почему 400px?
04:35 Функция max() в CSS
05:18 Поддержка
05:31 Выводы
Демо - codepen.io/anna_blok/full/Jjw...
Видео про clamp() - • ❌ Медиа-запросы не нуж...
Видео про правила адаптива - • Внедри эти фишки, чтоб...
🔵 Дзен - zen.yandex.ru/annblok
🔵 ВК - tpverstak
🔵 Telegram - t.me/tpverstak
🔵 Чат Telegram - t.me/tpverstakchat
🔵 Instagram - / annblok
🔵 TikTok - / annblok_webdev
🔴 Обучение - frontendblok.com/
#css #html #верстка #верстальщик #фронтенд

Игры

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

11 июн 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 92

@dmitriy4415 8 месяцев назад

Это не заменит media запросы.

@NotTheLastOne 8 месяцев назад

конечно не заменит, ведь медиа запросы решают множество других задач, а не только размеры элементов

@romangargosow 8 месяцев назад

Возможно стоит провести короткий лайф стрим с версткой одностаничника который содержит все эти новые функции😅

@annblok_webdev 8 месяцев назад

В ближайших планах есть выпуск с clamp(), но можно было и max() и min() туда попробовать внедрить. Неплохая идея 👍

@mihail2135 8 месяцев назад

Согласен с Вами . стрим . на стриме более подробнее можно понять всю суть.

@hovhanneshovhannisyan3081 8 месяцев назад

👍

@mark19944 8 месяцев назад

Всегда нужно быть в курсе событий, спасибо что помогаете

@andreylagno2372 8 месяцев назад

это верно в курсе событий нужно быть всегда

@tetyana5295 8 месяцев назад

спасибо, что так развернуто и понятно рассказываете важные технические моменты в создании сайтов, с вами стала разбираться в этой теме

@911allcausticcamera9 8 месяцев назад

Те функции что облегчают работу мне нравятся больше всего, надо запомнить

@CityGorsk 8 месяцев назад

У вас доходчивые и понятные уроки. Главное любить свою работу и будет всё с лёгкостью получаться. В наше время, веб разработки очень важны.

@user-gq4lg1fq9u 8 месяцев назад

Отлично , что вы так хорошо рассказуте про такую полезную тематику

@IbrohimJakbaraliyev-lm5kd 4 месяца назад

спасибо, ты мне очень помогла, желаю тебе удачи, ты очень умная и красивая, таких девушек мало, береги себя, еще раз спасибо, умница 😉☺

@arahnid_9844 8 месяцев назад

Мне кажется медиазапросы более читабельны. Со значениями 50%, 25% max, min еще куда не шло. Но при условных 13%, 42% и т.д., сидеть и высчитывать с калькулятором, это выглядит как лишний геморой. Вот clamp действительно крутая функция, ее уже применяю

@IgorBobyrev 8 месяцев назад

Эта новая функция позволяет обойтись без лишних брейкпоинтов, а их может быть много, больше чем два-три, если макет сложный. Для каждого элемента (а их могут быть десятки) прописывать поведение под каждое разрешение - гемор большой

@arahnid_9844 8 месяцев назад

@@IgorBobyrev возможно

@Eduard_1407 8 месяцев назад

@@IgorBobyrevсогласен, хотелось бы заранее закладывать адаптив элементам в css, до написания брекпоинтов

@sergeymickolaenko1161 8 месяцев назад

Спасибо за ваши советы, прекрасно всё объяснили👍💯

@user-qc7qi9hr3i 8 месяцев назад

Спасибо за информацию. Я согласна с вашимы выводами .

@tolasnisar2494 8 месяцев назад

Спасибо вам за этот подробный видео обзор.

@kristinapetriv3294 8 месяцев назад

Спасибо за информацию. Очень полезная штука. Раньше как то даже и не задумывалась об этом. Полезное видео

@nickz2586 8 месяцев назад

До этого видео у меня были вопросы по media-запросам, не очень была понятна разница между mobile first и desktop first. Оказалось, что не так и сложно. Спасибо, Анна.

@IgorBobyrev 8 месяцев назад

При desktop first ты начинаешь верстать с компьютерной версии, а на все меньшие разрешения ты ставишь брейкпоинты. При mobail first наоборот, без брейпоинтов только самое меньшее разрешение. Считается, что удобнее верстать с меньшего размера экрана, постепенно добавляя новые элементы, а не скрывая их, как при desktop first

@user-ek1sz6ie4k 8 месяцев назад

Цікаве відео. Думаю, на сьогоднішній день тема адаптивного сайту дуже потрібна.

@LostInspector 8 месяцев назад

Отличное видео, очень понятно даже для начинающих, которые раньше не знали вообще что такое вёрстка. Очень доступно.

@user-yg4jy6tz3t 8 месяцев назад

Все довольно подробно и понятно. Просто это такая малость от того, что надо знать!))

@beautifulnature8259 8 месяцев назад

Интересные функции. Значительно упростит процесс. Спасибо за инфу

@alexschaus1909 8 месяцев назад

Благодарю за очень интересное видео просмотрел и прослушал с большим интересом всё очень чётко рассказала.

@romatokar3516 8 месяцев назад

Это уж точно не замена, максимум для верстки резиновых макетов. Потом "внезапно" в медиазапросе будет эта же функция но с другими значениями. А еще свойства не с числовыми значенями говорят привет. Просто теперь вместо связки min-width, max-width, width можно выбрать нужную функцию и всё. Как фича для упрощения "резиновости" однозначно да, как замена запросам - нет.

@WERWOLION 8 месяцев назад

min-width, max-width используются для других целей потому что контейнерам нельзя задавать размеры

@IgorBobyrev 8 месяцев назад

Никто не говорит про полную замену брейкпоинтам - только про их уменьшение! Ну представь ты сверстал блок, а на меньшем разрешении он не влезает, приходится всем его элементам ставить значения под все брейкпоинты. А так ОДИН раз ты прописал эту функцию - и не надо так много брейкпоинтов ставить. Все элементы сохраняют пропорции макета. Как-то так

@romatokar3516 8 месяцев назад

@@WERWOLION мы же верстаем не только контейнеры, да и как минимум в видео пример того о чем я говорю а еще есть всякие эсайды, слайдауты к примеру которым прекрасно подойдут эти функции

@romatokar3516 8 месяцев назад

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

@WERWOLION 8 месяцев назад

@@romatokar3516 нет потому что используется давно контрукт на миксинах. А это вчерашний век. И вешается это дело на размер шрифта контейнера оболочки. А размеры в 90% случаях задавать нельзя

@Svet__alya 8 месяцев назад

Спасибо за советы специалиста, с помощью вас начала намного лучше разбираться в сайтах и их созданию👍

@TOK-um9zn 8 месяцев назад

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

@rashvmatrix9387 8 месяцев назад

Весьма интересное предложение. Надо пробовать.

@Youtuber__I 8 месяцев назад

спасибо все подробно и доступным языком рассказали и показали

@marinagor 8 месяцев назад

очень полезное и продуктивное видео получилось, супер)

@Sa1ahaddin 8 месяцев назад

Спасибо, инфа топ

@struf1761 8 месяцев назад

Такая красивая и шарит в сайтах и кодах, умничка ведь Аннют

@zoranpetrovski3051 8 месяцев назад

Awesome work 👏

@andreykonyuxov353 8 месяцев назад

Классное видео мне очень нравится спасибо большое автору

@ForestGamp-bd4re 8 месяцев назад

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

@user-dw2tc4cq9x 8 месяцев назад

Первый закон юзабилити: "Не заставляйте меня думать!"

@ivanov_roman 8 месяцев назад

А может быть, что использование этих функций будет замедлять сайт, так как браузер будет всё сситать

@xGL00M 7 месяцев назад

размер блока изменился, а как быть со шрифтами? они через медиа или есть какая фишка?

@ShohelRana-ut3zu 8 месяцев назад

Как потрясающая новость! Развитие в области адаптивного дизайна без @media - это шаг вперёд в удобстве и доступности веб-разработки.

@dasflugergehaimer4476 8 месяцев назад

Мы понимаем формулу и другим образом, второе значение в пикселях составляет процент от исходного, выраженное в первом значении. То есть 200/0,5 = 400. Весьма забубенистая штука, что там по поддержке движков.

@maksandrol1 8 месяцев назад

И в чем преимущество такого метода перед теми же медиа-запросами?

@user-ys4ug1hc8d 8 месяцев назад

Симпатичная милая девочка с голубыми глазками. Кукольная внешность.)

@user-fj6cd1wr9o 8 месяцев назад

Это хорошая идея,только когда будет в действии.

@user-oy3qk9ty1e 8 месяцев назад

ТЫ просто лучшая тебя смотреть одно удовольствие

@yunadzukifaruhatoo1431 8 месяцев назад

Это же можно сразу секции задавать значение Макс размера при котором она не будет тянуться))) то есть по бокам будут ушки добавляться))

@Eduard_1407 8 месяцев назад

Типа отказаться от контейнера получается)

@md.sazzad 8 месяцев назад

this is an amazing and really very nice

@user-ol8wp5fs4l 8 месяцев назад

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

@-Vladimir-- 8 месяцев назад

Может привычка но media как-то очевиднее, что ли.

@annblok_webdev 8 месяцев назад

Сила привычки

@NotTheLastOne 8 месяцев назад

эти функции меняют лишь размеры элемента

@mystreetlifting76 8 месяцев назад

Новички тоже бывают разные. Подходит ли курс для абсолютных новичков?

@annblok_webdev 8 месяцев назад

Да, подходит. Курс специально рассчитан на тех, кто нигде этому не учился.

@VikaShovkyn-ql4qt 8 месяцев назад

Девушка, ви молодец

@dclxviclan 8 месяцев назад

Krasavitca

@parango812 8 месяцев назад

А зачем это вообще нужно, если можно использовать, например, сетку бутстрап? И в чем преимущество такого метода перед теми же медиа-запросами?

@user-px3my8ko1d 8 месяцев назад

Адаптивный дизайн помогает правильно отображать размеры сайта на различных устройствах...

@olegplahotniy7307 8 месяцев назад

Кликбейтный заголовок, тьфу...

@Mugen68606 8 месяцев назад

Я новичок, не могли бы вы объяснить мне, что плохого в медиазапросах?

@annblok_webdev 8 месяцев назад

Плохо ничего нет, но порой совершается ошибка и таких медиа-запросов появляется много из-за того, что используются не те единицы измерения или методы, которые вынуждают включить лишний медиа-запрос, без которого можно было бы обойтись

@Mugen68606 8 месяцев назад

@@annblok_webdev спасибо за ответ, попробую осмыслить

@Stanley19708 8 месяцев назад

Уже не обойтись без этого, и оно входит во все как бы справочники , наверно

@Alex-iu7ly 8 месяцев назад

Эх, и зачем такой кликбейт делать. Кому нужен адаптивный сайт с одним брейкпоинтом, так еще и кастрированным?

@MegaPapoy 8 месяцев назад

это замечательно что можно не использовать медиа запрос, но дебажить подобные вещи и искать в каком месте происходить изменение элемента вот это будет задача. потому что на практике без медиа запросов просто не обойтись, а миксовать два разных подхода в адаптиве это плохая практика. но можете закидать меня помидорами )

@Eduard_1407 8 месяцев назад

Так вроде в инспекторе можно посмотреть css код и в какой строке, однако согласен что несколько подходов совмещать неудобно.