Есть еще один способ: на ширинах до 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; } }
Верно. Но в любом случае нужно знать метрики, чтобы понимать, какого рода клиенты, мобилка или десктоп, у проекта в приоритете. Ну а вообще, по-хорошему, стилей в проекте должно быть как можно меньше, особенно в медиазапросах, чтобы нивелировать разницу в перформансе на разного рода устройствах, независимо от примененного подхода в адаптации. Зачастую проблемы совсем не в стилях и маловероятно что в подходе к верстке, а в раздутых бандлах джаваскрипта и бешеного размера загружаемых клиентом файлов медиаресурсов :)
Добрый день! Благодарю за ваши работы Нет ли у вас рекомендаций/приемы/ видео dvh/vh, а именно тонкостях поведения в браузере скажем Safari стилизации хедера и учета его в верстке, когда часть страниц сверстаны во всю высоту экрана и скролл не должен появляться а часть экранном может быть сверстаны за минусом хедера и попасть пиксель в пиксель без скролла а тут еще в сафари адресная строка есть!!!.
А для desktop-first, mobile-first есть готовые длины экрана для media запроса? К примеру оптимальная ширина, когда нужно сократить количество столбцов, ширина телефонов, чтобы убрать лишние декоративные элементы или ширина всё время устанавливается путем проведения экспериментов через devtools?
0:21Дак адаптив не работает! На твоем сайте в разд. разработчка поставь масштаб 200 и все будет выглядеть крупно, что не очень красиво. При этом на том же яндексе при больших масштабах все отображается корректно. Как строить медиа запросы при таких масштабах?
Увеличение масштаба и должно приводить к увеличению элементов интерфейса и размера шрифта в частности. Когда ты на десктопе шириной 1920px выставляешь 200% масштаба, браузер воспринимает ширину экрана как 960px, т. е. в два раза меньше. Это нормально. «Адаптив» как процесс - это подстраивание интерфейса под любые ширины экранов так, чтобы сайт не визуально не ломался.
@@AleksanderLamkov на яндексе такого нет. Там не важно какой масштаб, все выглядит идеально. Таких сайтов кстати много где при увеличении масштаба адаптив срабатывает и объекты не увеличиваются, а подстраиваются как надо. Не совсем понятно какая логика при построении такого адаптива. Ты же в ВК работаешь, дак на в профиле на своей страницы тоже при масштабировании все работает корректно
И подумай, зачем увеличение масштаба в браузере предусмотрено? Это нужно, чтобы пользователи с проблемным зрением могли удобнее воспринимать сайт. Увеличение размера шрифта зачастую ведет к перестроению сетки за счет сработавших медиазапросов, т. к. если при определенных размерах шрифта страница не может уместить все содержимое в ширину текущего экрана, то ей не остается выбора, кроме как перестраивать сетку, как это делается на мобильных устройствах.
Привет! Определенно верстать секцию и сразу её адаптировать. Так ты будешь сразу в контексте и в случае чего, менее болезненно переделаешь косяки десктопа, если они будут мешать адаптации.
Привет, изучаю css, и тут возникла проблема.Хотел другу перекинуть файлы html и css чтобы он посмотрел что я делаю.при этом подключил файл css к html.Подключал как все: (файл назывался по другому но это не суть). Так вот, файл css не работал на сайте, подключено было все из файла html всё работало а вот из css нет.Искал решение проблемы, нашёл информацию про относительные ссылки к файлу, как их только не ставил, но html не видит подключённый файл .css на других устройствах. Пришел к выводу что путь к файлу введется до корня, тоесть до диска c, из-за этого файл css и не грузит.Правилен ли мой вывод?И как мне сдлеать так чтобы путь файла начинался просто с папки, любой папки, хотя бы с тем же названием просто, а не была привязана путём к диску c. Если непонятно прошу прощения попытаюсь некоторые моменты разъяснить если будут вопросы.потому что вроде проблемы не должно быть, а она есть.
Привет. Советую направить вопрос в наш чат: t.me/friendlyFrontendChat Но скорее всего тебе нужно просто указать для относительный путь и все заработает: href="./styles.css"
Здравствуйте! Спасибо за ваш курс. Все очень понятно и лаконично. Мне понравилось, что уроки коротки и не утомляют. 👋👍
О, про залипание кнопки на тач устройствах очень полезно, спасибо! Раньше костыльными решениями исправляли, а оказыватется есть такая прекрасная штука
Есть еще один способ: на ширинах до 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;
}
}
Опааа, опааа, че поймал. Щас Web с колен поднимем
Спасибо АЛЕКСАНДР ! продолжаем смотреть.
полезно, неоднократно задумывался как обойти это "залипание" кнопки, но не добирался разобраться, спасибо!
Спасибо большое за информацию
Отличное видео !
Все понятно!
Спасибо за труд
самое лучшее видео про адаптивную верстку которое либо я видел, благодарю за отличный контент!
Коммент в поддержку
Классный контент! Спасибо!
clamp ( ) хорошо решает вопросы адаптации
Да, безусловно, но мне кажется, это «информация со звездочкой», не для новичков, поэтому рассказываю об этой функции в уроке вне текущего курса :)
Тогда ещё со звёздочкой можно добавить для гридов:
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr))
крос, видео без воды. уровень
за inset спасибо!
Про inset ещё в 10-м видео курса чуть подробнее говорил, если что :)
th-cam.com/video/jQCzxM2dPWU/w-d-xo.html
Спасибо за урок!
Лайк
спасибо, топим дальше! а у hover: hover, хорошая поддержка?
Да, это давнишняя фича, 95% поддержки, смело можно использовать.
Вёрстка по технологии Mobile first увеличивает производительность для мобильных. Это очень важно для сайта!
Верно. Но в любом случае нужно знать метрики, чтобы понимать, какого рода клиенты, мобилка или десктоп, у проекта в приоритете.
Ну а вообще, по-хорошему, стилей в проекте должно быть как можно меньше, особенно в медиазапросах, чтобы нивелировать разницу в перформансе на разного рода устройствах, независимо от примененного подхода в адаптации.
Зачастую проблемы совсем не в стилях и маловероятно что в подходе к верстке, а в раздутых бандлах джаваскрипта и бешеного размера загружаемых клиентом файлов медиаресурсов :)
спасибо!
Добрый день! Благодарю за ваши работы
Нет ли у вас рекомендаций/приемы/ видео
dvh/vh, а именно тонкостях поведения в браузере скажем Safari
стилизации хедера и учета его в верстке, когда часть страниц сверстаны во всю высоту экрана и скролл не должен появляться
а часть экранном может быть сверстаны за минусом хедера и попасть пиксель в пиксель без скролла
а тут еще в сафари адресная строка есть!!!.
Есть такой ролик на канале:
CSS: svh, lvh, dvh - новые единицы измерения
th-cam.com/video/aNGyq7j0yYA/w-d-xo.htmlsi=VD-bjPwIjGbdK-Kd
а есть какие то стандарты при указании размеров экрана в медиа запросах или на глаз?
Привет! За основу можно взять эти: getbootstrap.com/docs/5.0/layout/breakpoints/
спасибо)@@AleksanderLamkov
Актуальна ли еще верстка под 320px/360px ? На какой минимальной ширине можно останавливаться и ниже не адаптировать? конец 2024
Под 360px, меньше не стоит.
Огонб про hover не знал
i'm too
А для desktop-first, mobile-first есть готовые длины экрана для media запроса? К примеру оптимальная ширина, когда нужно сократить количество столбцов, ширина телефонов, чтобы убрать лишние декоративные элементы или ширина всё время устанавливается путем проведения экспериментов через devtools?
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) { /* стили для десктопа */ }
@@AleksanderLamkov Большое спасибо за ответ
0:21Дак адаптив не работает! На твоем сайте в разд. разработчка поставь масштаб 200 и все будет выглядеть крупно, что не очень красиво. При этом на том же яндексе при больших масштабах все отображается корректно. Как строить медиа запросы при таких масштабах?
Увеличение масштаба и должно приводить к увеличению элементов интерфейса и размера шрифта в частности. Когда ты на десктопе шириной 1920px выставляешь 200% масштаба, браузер воспринимает ширину экрана как 960px, т. е. в два раза меньше. Это нормально.
«Адаптив» как процесс - это подстраивание интерфейса под любые ширины экранов так, чтобы сайт не визуально не ломался.
@@AleksanderLamkov на яндексе такого нет. Там не важно какой масштаб, все выглядит идеально. Таких сайтов кстати много где при увеличении масштаба адаптив срабатывает и объекты не увеличиваются, а подстраиваются как надо. Не совсем понятно какая логика при построении такого адаптива. Ты же в ВК работаешь, дак на в профиле на своей страницы тоже при масштабировании все работает корректно
О каком именно сайте яндекса ты говоришь? Который поисковик, dzen.ru/?
И подумай, зачем увеличение масштаба в браузере предусмотрено? Это нужно, чтобы пользователи с проблемным зрением могли удобнее воспринимать сайт.
Увеличение размера шрифта зачастую ведет к перестроению сетки за счет сработавших медиазапросов, т. к. если при определенных размерах шрифта страница не может уместить все содержимое в ширину текущего экрана, то ей не остается выбора, кроме как перестраивать сетку, как это делается на мобильных устройствах.
@@AleksanderLamkov Нет, который яндекс с короткой ссылкой. В Вк на профиле тоже при масштабе все выглядит корректно
хотел спросить что удобнее, полностью с верстать декстопную версию а потом делать адаптив или сделать одну секцию и сделать адаптив под нее же сразу
Привет! Определенно верстать секцию и сразу её адаптировать. Так ты будешь сразу в контексте и в случае чего, менее болезненно переделаешь косяки десктопа, если они будут мешать адаптации.
Развее нужен метатег http-equiv="X-UA-Compatible"?
Не нужен. Можно удалять. Но и его наличие в разметке в принципе ничем не помешает :)
Привет, изучаю css, и тут возникла проблема.Хотел другу перекинуть файлы html и css чтобы он посмотрел что я делаю.при этом подключил файл css к html.Подключал как все: (файл назывался по другому но это не суть).
Так вот, файл css не работал на сайте, подключено было все из файла html всё работало а вот из css нет.Искал решение проблемы, нашёл информацию про относительные ссылки к файлу, как их только не ставил, но html не видит подключённый файл .css на других устройствах.
Пришел к выводу что путь к файлу введется до корня, тоесть до диска c, из-за этого файл css и не грузит.Правилен ли мой вывод?И как мне сдлеать так чтобы путь файла начинался просто с папки, любой папки, хотя бы с тем же названием просто, а не была привязана путём к диску c.
Если непонятно прошу прощения попытаюсь некоторые моменты разъяснить если будут вопросы.потому что вроде проблемы не должно быть, а она есть.
Привет. Советую направить вопрос в наш чат: t.me/friendlyFrontendChat
Но скорее всего тебе нужно просто указать для относительный путь и все заработает:
href="./styles.css"