Как адаптировать верстку, если макет для больших экранов отличается от макета для мобильных устройств?

Question

[jshandler]

Задался вопросом, правильно ли я делаю... Когда нужно выполнить адаптивную верстку, но макет для маленьких и больших экранов значительно отличается, я создаю два (или больше) главных wraper-ов и оборачиваю в них весь контент html для определенной ширины экрана. И вот... Правильный ли это подход? Получается при ширине экрана, условно, до 700px отображается один wraper, а от 700px - другой. Это вообще ок?

Просто часто вижу на других сайтах, что есть отдельная верстка для мобильных устройств (и ссылка даже на нее есть - "Мобильная версия сайта"), по этому и задумался, может я что-то не так делаю, и лучше отдельный html создавать с мобильной версткой для каждой страницы?

Comments

[Ankhena]

Нужно выяснить что отличается, контент или только его оформление.

Получается при ширине экрана, условно, до 700px отображается один wraper, а от 700px - другой.

Если содержимое сильно различается, то разумнее делать отдельные версии.
Если только оформление одного и того же контента, то не нужно его дублировать, а только менять стили в media.

Answer 1

[DevMan]

так в чём вопрос?

если два разных дизайна под разные разрешения - это просто два разных дизайна, а не адаптивный.
каждый из этих подходов имеет плюсы и минусы.

Answer 2

[Andrew]

Добрый.
Как у вас реализован выбор - какой wrapper показывать а какой нет?
Вообще, весь ваш вопрос решается с помощью одного только правила CSS - media query
Тут пример - в нем, в зависимости от ширины экрана, меняется фон страницы.
В вашем случае нужно, используя этот же принцип - в зависимости от ширины экрана менять расположение и внешний вид элементов, все через CSS - так, как указано в макетах.
Дублировать контент, а также создавать разные копии для страниц - не нужно такого делать, имхо