хотел спросить что удобнее, полностью с верстать декстопную версию а потом делать адаптив или сделать одну секцию и сделать адаптив под нее же сразу
@AleksanderLamkov
5 ай бұрын
Привет! Определенно верстать секцию и сразу её адаптировать. Так ты будешь сразу в контексте и в случае чего, менее болезненно переделаешь косяки десктопа, если они будут мешать адаптации.
@PROBOYNIC
Жыл бұрын
Отличное видео ! Все понятно! Спасибо за труд
@colodatwin3102
Жыл бұрын
спасибо, топим дальше! а у hover: hover, хорошая поддержка?
@AleksanderLamkov
Жыл бұрын
Да, это давнишняя фича, 95% поддержки, смело можно использовать.
@vtech8716
Жыл бұрын
Спасибо АЛЕКСАНДР ! продолжаем смотреть.
@Ivanfwit
11 ай бұрын
полезно, неоднократно задумывался как обойти это "залипание" кнопки, но не добирался разобраться, спасибо!
@smotritelyoutube
Жыл бұрын
Лайк
@NtDrke
11 күн бұрын
0:21Дак адаптив не работает! На твоем сайте в разд. разработчка поставь масштаб 200 и все будет выглядеть крупно, что не очень красиво. При этом на том же яндексе при больших масштабах все отображается корректно. Как строить медиа запросы при таких масштабах?
@AleksanderLamkov
11 күн бұрын
Увеличение масштаба и должно приводить к увеличению элементов интерфейса и размера шрифта в частности. Когда ты на десктопе шириной 1920px выставляешь 200% масштаба, браузер воспринимает ширину экрана как 960px, т. е. в два раза меньше. Это нормально. «Адаптив» как процесс - это подстраивание интерфейса под любые ширины экранов так, чтобы сайт не визуально не ломался.
@NtDrke
11 күн бұрын
@@AleksanderLamkov на яндексе такого нет. Там не важно какой масштаб, все выглядит идеально. Таких сайтов кстати много где при увеличении масштаба адаптив срабатывает и объекты не увеличиваются, а подстраиваются как надо. Не совсем понятно какая логика при построении такого адаптива. Ты же в ВК работаешь, дак на в профиле на своей страницы тоже при масштабировании все работает корректно
@AleksanderLamkov
11 күн бұрын
О каком именно сайте яндекса ты говоришь? Который поисковик, dzen.ru/?
@AleksanderLamkov
11 күн бұрын
И подумай, зачем увеличение масштаба в браузере предусмотрено? Это нужно, чтобы пользователи с проблемным зрением могли удобнее воспринимать сайт. Увеличение размера шрифта зачастую ведет к перестроению сетки за счет сработавших медиазапросов, т. к. если при определенных размерах шрифта страница не может уместить все содержимое в ширину текущего экрана, то ей не остается выбора, кроме как перестраивать сетку, как это делается на мобильных устройствах.
@NtDrke
11 күн бұрын
@@AleksanderLamkov Нет, который яндекс с короткой ссылкой. В Вк на профиле тоже при масштабе все выглядит корректно
@morismustanger6095
Жыл бұрын
за inset спасибо!
@AleksanderLamkov
Жыл бұрын
Про inset ещё в 10-м видео курса чуть подробнее говорил, если что :) kzitem.info/news/bejne/y4d54KyDa5aBioo
@alikhanshorin6100
Ай бұрын
самое лучшее видео про адаптивную верстку которое либо я видел, благодарю за отличный контент!
@ByTheWay12
2 ай бұрын
А для desktop-first, mobile-first есть готовые длины экрана для media запроса? К примеру оптимальная ширина, когда нужно сократить количество столбцов, ширина телефонов, чтобы убрать лишние декоративные элементы или ширина всё время устанавливается путем проведения экспериментов через devtools?
@AleksanderLamkov
2 ай бұрын
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
2 ай бұрын
@@AleksanderLamkov Большое спасибо за ответ
@ezoflin_home
9 ай бұрын
О, про залипание кнопки на тач устройствах очень полезно, спасибо! Раньше костыльными решениями исправляли, а оказыватется есть такая прекрасная штука
@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; } }
@WebSEOkz
Жыл бұрын
Вёрстка по технологии Mobile first увеличивает производительность для мобильных. Это очень важно для сайта!
@AleksanderLamkov
Жыл бұрын
Верно. Но в любом случае нужно знать метрики, чтобы понимать, какого рода клиенты, мобилка или десктоп, у проекта в приоритете. Ну а вообще, по-хорошему, стилей в проекте должно быть как можно меньше, особенно в медиазапросах, чтобы нивелировать разницу в перформансе на разного рода устройствах, независимо от примененного подхода в адаптации. Зачастую проблемы совсем не в стилях и маловероятно что в подходе к верстке, а в раздутых бандлах джаваскрипта и бешеного размера загружаемых клиентом файлов медиаресурсов :)
@mouri_san
Ай бұрын
спасибо!
@Евгения-е7т
6 ай бұрын
а есть какие то стандарты при указании размеров экрана в медиа запросах или на глаз?
@AleksanderLamkov
6 ай бұрын
Привет! За основу можно взять эти: getbootstrap.com/docs/5.0/layout/breakpoints/
@Евгения-е7т
6 ай бұрын
спасибо)@@AleksanderLamkov
@gregdmitriev2784
11 ай бұрын
clamp ( ) хорошо решает вопросы адаптации
@AleksanderLamkov
11 ай бұрын
Да, безусловно, но мне кажется, это «информация со звездочкой», не для новичков, поэтому рассказываю об этой функции в уроке вне текущего курса :)
@Clay286
7 ай бұрын
Тогда ещё со звёздочкой можно добавить для гридов: grid-template-columns: repeat(auto-fit, minmax(100px, 1fr))
Пікірлер: 40