Весь Адаптив на сайте в vw это нормально?

Я только начал разбираться в адаптиве на сайте и задумался, почему бы не написать все стили в vw и не прописывать media запросы под каждый элемент, на сколько это нормально? Так делают? Если нет, то почему так не стоит делать?

P.s. - Я понимаю, что это не профессионально, просто "можно ли?", если я покажу кому-то код, меня побьют?


Ответы (3 шт):

Автор решения: Вячеслав

Это будет резина, а не адаптив. На 1920, к примеру, 50vw = 960px, а на 320 = 160px. Если в этом контейнере на 50vw будет еще несколько элементов, то на разрешении 1920 они нормально поместятся в контейнер, а при 320 уже будут совсем мелкие.

→ Ссылка
Автор решения: eccs0103

Не совсем

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; для обрезки, если они выйдут за груниц.
Существует множество способов адаптирования. Нужно знать их как можно лучше и знать в конкретной ситуации что больше поможет.

→ Ссылка
Автор решения: Qwertiy

Во-первых, важный вопрос - что именно понимать под словом "всё" - только лейауты или же размер шрифта тоже.

То, что сделано в чисто во 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. Они дают бОльшую гибкость и гораздо более удобны если есть несколько вложенных мест для перестроения лейаута.

→ Ссылка