20. Адаптивная верстка в CSS. Desktop и mobile first. Медиазапросы @media. Свойства min-max размеров

[@Ivanfwit]

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

[@ezoflin_home]

О, про залипание кнопки на тач устройствах очень полезно, спасибо! Раньше костыльными решениями исправляли, а оказыватется есть такая прекрасная штука

[@user-web-garage]

Есть еще один способ: на ширинах до 768px делать через hover background по умолчанию, а через active такой, какой нужен нам. Иначе элемент остается без интерактивности. Пример: button { background-color: red; } button:hover { background-color: blue; } @media (max-width: 768px) { &:hover { background-color: red; } &:active { background-color: blue; } }

[@vtech8716]

Спасибо АЛЕКСАНДР ! продолжаем смотреть.

[@PROBOYNIC]

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

[@svitboomer8840]

Опааа, опааа, че поймал. Щас Web с колен поднимем

[@Сандро-п7с]

Спасибо большое за информацию

[@alikhanshorin6100]

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

[@bjol_Dg]

clamp ( ) хорошо решает вопросы адаптации

[@AleksanderLamkov]

Да, безусловно, но мне кажется, это «информация со звездочкой», не для новичков, поэтому рассказываю об этой функции в уроке вне текущего курса :)

[@Clay286]

Тогда ещё со звёздочкой можно добавить для гридов: grid-template-columns: repeat(auto-fit, minmax(100px, 1fr))

[@morismustanger6095]

за inset спасибо!

[@AleksanderLamkov]

Про inset ещё в 10-м видео курса чуть подробнее говорил, если что :) kzbin.info/www/bejne/oIKmq6uDZ8mDjbc

[@Oleg-ql8rb]

крос, видео без воды. уровень

[@smotritelyoutube]

Лайк

[@Clay286]

Классный контент! Спасибо!

[@АлександрСальников-с2ж]

Коммент в поддержку

[@colodatwin3102]

спасибо, топим дальше! а у hover: hover, хорошая поддержка?

[@AleksanderLamkov]

Да, это давнишняя фича, 95% поддержки, смело можно использовать.

[@akylbekbaizakov]

Спасибо за урок!

[@mouri_san]

спасибо!

[@unlimitedgames8357]

Огонб про hover не знал

[@colodatwin3102]

i'm too

[@WebSEOkz]

Вёрстка по технологии Mobile first увеличивает производительность для мобильных. Это очень важно для сайта!

[@AleksanderLamkov]

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

[@ByTheWay12]

А для desktop-first, mobile-first есть готовые длины экрана для media запроса? К примеру оптимальная ширина, когда нужно сократить количество столбцов, ширина телефонов, чтобы убрать лишние декоративные элементы или ширина всё время устанавливается путем проведения экспериментов через devtools?

[@AleksanderLamkov]

360-767 - мобилка 768-1023 - планшет 1024 и выше - десктоп Диапазоны применимы к любому подходу. Для desktop-first так: /* без медиазапроса - стили для десктопа */ @media (max-width: 1023px) { /* стили для планшета */ } @media (max-width: 767px) { /* стили для мобилок */ } Для mobile-first так: /* без медиазапроса - стили для мобилки */ @media (min-width: 768px) { /* стили для планшета */ } @media (min-width: 1024px) { /* стили для десктопа */ }

[@ByTheWay12]

@@AleksanderLamkov Большое спасибо за ответ

[@Евгения-е7т]

а есть какие то стандарты при указании размеров экрана в медиа запросах или на глаз?

[@AleksanderLamkov]

Привет! За основу можно взять эти: getbootstrap.com/docs/5.0/layout/breakpoints/

[@Евгения-е7т]

спасибо)@@AleksanderLamkov

[@sao4227]

хотел спросить что удобнее, полностью с верстать декстопную версию а потом делать адаптив или сделать одну секцию и сделать адаптив под нее же сразу

[@AleksanderLamkov]

Привет! Определенно верстать секцию и сразу её адаптировать. Так ты будешь сразу в контексте и в случае чего, менее болезненно переделаешь косяки десктопа, если они будут мешать адаптации.

[@artfast9811]

Привет, изучаю css, и тут возникла проблема.Хотел другу перекинуть файлы html и css чтобы он посмотрел что я делаю.при этом подключил файл css к html.Подключал как все: (файл назывался по другому но это не суть). Так вот, файл css не работал на сайте, подключено было все из файла html всё работало а вот из css нет.Искал решение проблемы, нашёл информацию про относительные ссылки к файлу, как их только не ставил, но html не видит подключённый файл .css на других устройствах. Пришел к выводу что путь к файлу введется до корня, тоесть до диска c, из-за этого файл css и не грузит.Правилен ли мой вывод?И как мне сдлеать так чтобы путь файла начинался просто с папки, любой папки, хотя бы с тем же названием просто, а не была привязана путём к диску c. Если непонятно прошу прощения попытаюсь некоторые моменты разъяснить если будут вопросы.потому что вроде проблемы не должно быть, а она есть.

[@AleksanderLamkov]

Привет. Советую направить вопрос в наш чат: t.me/friendlyFrontendChat Но скорее всего тебе нужно просто указать для относительный путь и все заработает: href="./styles.css"

[@hyperpocket.]

Развее нужен метатег http-equiv="X-UA-Compatible"?

[@AleksanderLamkov]

Не нужен. Можно удалять. Но и его наличие в разметке в принципе ничем не помешает :)

[@NtDrke]

0:21Дак адаптив не работает! На твоем сайте в разд. разработчка поставь масштаб 200 и все будет выглядеть крупно, что не очень красиво. При этом на том же яндексе при больших масштабах все отображается корректно. Как строить медиа запросы при таких масштабах?

[@AleksanderLamkov]

Увеличение масштаба и должно приводить к увеличению элементов интерфейса и размера шрифта в частности. Когда ты на десктопе шириной 1920px выставляешь 200% масштаба, браузер воспринимает ширину экрана как 960px, т. е. в два раза меньше. Это нормально. «Адаптив» как процесс - это подстраивание интерфейса под любые ширины экранов так, чтобы сайт не визуально не ломался.

[@NtDrke]

@@AleksanderLamkov на яндексе такого нет. Там не важно какой масштаб, все выглядит идеально. Таких сайтов кстати много где при увеличении масштаба адаптив срабатывает и объекты не увеличиваются, а подстраиваются как надо. Не совсем понятно какая логика при построении такого адаптива. Ты же в ВК работаешь, дак на в профиле на своей страницы тоже при масштабировании все работает корректно

[@AleksanderLamkov]

О каком именно сайте яндекса ты говоришь? Который поисковик, dzen.ru/?

[@AleksanderLamkov]

И подумай, зачем увеличение масштаба в браузере предусмотрено? Это нужно, чтобы пользователи с проблемным зрением могли удобнее воспринимать сайт. Увеличение размера шрифта зачастую ведет к перестроению сетки за счет сработавших медиазапросов, т. к. если при определенных размерах шрифта страница не может уместить все содержимое в ширину текущего экрана, то ей не остается выбора, кроме как перестраивать сетку, как это делается на мобильных устройствах.

[@NtDrke]

@@AleksanderLamkov Нет, который яндекс с короткой ссылкой. В Вк на профиле тоже при масштабе все выглядит корректно