Весь Адаптив на сайте в vw это нормально?
Я только начал разбираться в адаптиве на сайте и задумался, почему бы не написать все стили в vw и не прописывать media запросы под каждый элемент, на сколько это нормально? Так делают? Если нет, то почему так не стоит делать?
P.s. - Я понимаю, что это не профессионально, просто "можно ли?", если я покажу кому-то код, меня побьют?
Ответы (3 шт):
Это будет резина, а не адаптив. На 1920, к примеру, 50vw = 960px, а на 320 = 160px. Если в этом контейнере на 50vw будет еще несколько элементов, то на разрешении 1920 они нормально поместятся в контейнер, а при 320 уже будут совсем мелкие.
Не совсем
vw
это нужно для создания адаптивных веб-страниц, но недостаточно. Лучше всего использовать vmin
а не vw
для избегания проблем с ориентацией:
:root {
--size-standard: 4vmin;
}
Так же вам пригодятся media запросы для уточнения этого размера:
@media only screen {
:root {
--size-standart: calc(8vmin);
}
}
@media only screen and (min-width: 600px) {
:root {
--size-standart: calc(7vmin);
}
}
@media only screen and (min-width: 768px) {
:root {
--size-standart: calc(6vmin);
}
}
@media only screen and (min-width: 992px) {
:root {
--size-standart: calc(5vmin);
}
}
@media only screen and (min-width: 1200px) {
:root {
--size-standart: calc(4vmin);
}
}
Вам предстоит задать все размеры через --size-standard
для поддержки адаптивности.
При верстке если стабильна количество контента и размер контейнера стоит использовать grid
с адаптивной разметкой grid-template
. А при гибких контейнеров стоит использовать flex
. Иногда стоит создать разную верстку для разных ориентаций:
@media only screen and (orientation: portrait) {
body {
grid-template:
'header-area' auto
'nav-area' auto
'content-area' 1fr
/ 1fr
;
}
}
@media only screen and (orientation: landscape) {
body {
grid-template:
'header-area header-area' auto
'nav-area content-area' 1fr
/ auto 1fr
;
}
}
Для адаптивности текста стоит использовать em
и очень редко rem
. Иногда использовать text-overflow: ellipsis;
для обрезки, если они выйдут за груниц.
Существует множество способов адаптирования. Нужно знать их как можно лучше и знать в конкретной ситуации что больше поможет.
Во-первых, важный вопрос - что именно понимать под словом "всё" - только лейауты или же размер шрифта тоже.
То, что сделано в чисто во viewport-юнитах будет невозможно масштабировать. Масштаб как бы будет меняться, но области будут оставаться на своих местах и в прежних (относительно экрана) размерах.
Начну с варианта, когда всё полностью включая шрифты задано в v*
Это будет означать, что пользователь вообще не может применить масштабирование к сайту - сколько бы он не менял масштаб, не изменится абсолютно ничего. При этом текст будет либо огромным на большом мониторе, либо неразличимо мелким на телефоне, а то и одновременно оба этих варианта. Но что-то приблизить и увеличить возможности не будет.
А может ли это в каком-то случае быть хорошо, а не плохо? Ну почти на любой в общем случае плохой вариант может найтись ситуация, в которой он идеально подходит. Мне приходит в голову какая-нибудь игра, где игровое поле полностью помещается на экране - его в любом случае придётся вписать в мелкий размер для телефона, хотя, может всё равно оказаться, что для большого компьютерного монитора стоит сделать какие-то поля или поменять что-то ещё.
Теперь второй вариант: задаём лейаут в v*, но не шрифты
Тут сталкиваемся с другой проблемой: при ширине в 1920px ширина в 30vw составит 576px - где-то около 76ch (т. е. можно прилично так текста разместить - как в строке печатной книги), а если это сделать при 320px, то будет 96px - около 12ch (в которые даже номер телефона с разделителями без переносов не влезет). И это я ещё не учитывал, что у блоков должны быть отступы. Т. е. такой сайт читать будет вообще невозможно нормально.
И ещё несколько побочных эффектов
В вопросе почему-то говорится не просто о viewport-юнитах, а конкретно о vw
. Меня это наводит на мысль, что есть желание не вписать страницу в экран полностью (скорее всего, через vmin), а вписать только по ширине, но на высоту забить. И тут появляются они... Скроллы... vw (впрочем, как и остальные v*) полностью игнорируют скроллы. Благодаря этому как только при ширине в 100vw (или суммарной ширине в 100vw) появляется вертикальный скролл, бонусом к нему на всех десктопах (кроме мака по умолчанию) станет горизонтальный скролл с возможностью скроллить на 17px вправо. Есть несколько способов от них избавиться, но гораздо лучше не создавать себе проблему.
Опять же относительно вписывания по ширине: если у сайта есть зафиксированные элементы (шапка, футер, навигация), то высота, которую они займут на телефоне в портретной и в альбомной ориентации, совершенно разная. Причём, при зависимости шрифта от vw получится, что имея меньше вертикального пространства в альбомной конфигурации, мы наоборот отдаём больше (из-за большего vw) под зафиксированные элементы, что, скорее всего, сделает сайт полностью непригодным к использованию в альбомной конфигурации.
Про media-запросы
На каждый элемент они точно не нужны. Элементы стоит по максимум у позиционировать responsive по отношению к их контейнеру, а media-запросы использовать на уровне лейаута страницы и в нескольких местах, где они действительно нужны.
Я стараюсь не использовать media-запросы если можно сделать иначе на основе контента.
Вообще, уже появились container queries и скоро их можно будет спокойно использовать вместо media. Они дают бОльшую гибкость и гораздо более удобны если есть несколько вложенных мест для перестроения лейаута.