Какая правильная адаптация сайта?

Question

[saplas]

Есть сайт - полностью не адаптивный. Подскажите, как лучше сделать его адаптивным?
Просто использовать медиа запросы? для 320,480, 768px (например) Не будет это, так сказать, говорить о каком-то непрофессионализме? Или это обычная практика в таких случаях?
Или же есть какая-то технология.
bootstrap не подойдет, т.к придется переверстывать сайт.

И еще вопрос с меню в шапке сайта. Оно выходить за пределы экрана. Чтобы сделать гамбургер, тот точно придется переверстывать?

Answer 1

[Сергей Горячев]

Можно использовать "пошаговое" уменьшение.
Сжимая окно сайта, смотреть, на каком разрешении экрана "ломается" верстка и уменьшать / переносить / выключать элементы верстки.
Подход кропотливый, но не создает проблем в виде перевестки на бутстрап.
Но в большинстве своем, куда более качественный, чем та же адаптация сайта на простой бутстрап.
Количество "шагов" и размер "шага" определяется всегда индивидуально.
Готовой "таблетки" при таком рецепте нет.
Я чаще всего использую шаг 50 или 100 пикселей.
Плюсом этого метода является возможность удобно разместить все элементы адаптива в отдельном файле css.
Называть можно как угодно его, у меня всегда media.css, подключается после основного файла стилей.

@media screen and (max-width: 1200px) {
    .content {
        font-size: 50px;
    }
}
@media screen and (max-width: 1000px) {
    .content {
        font-size: 44px;
    }
}

Comments

[saplas]

Спасибо за ваш ответ! И еще вопрос с меню в шапке сайта. Оно выходить за пределы экрана. Чтобы сделать гамбургер, тот точно придется переверстывать?

[Сергей Горячев]

saplas, переверстывать нет. Скрытый гамбургер разместить в разметке.
Когда меню выходит за пределы, сделать его абсолютным позиционированием, скрыть его, и тогда уже показать гамбургер.
Тут придется написать простую jquery функцию, по клику на гамбургер, открывать меню.