Как решить проблему верстки при масштабировании окна браузера?

Question

[Артур]

Здравствуйте, использую для резинового текста плагин FlowType. Проблема при масштабировании окна браузера. Как решить этот вопрос? Верстка нужна резиновая. Медиа запросы только?
test1.webinme.ru/account.html

Comments

[Сергей delphinpro]

Адаптивная верстка с использованием относительных единиц прекрасно масштабируется.
Отсюда единственный вывод — верстайте правильно, по фен-шую, и всё будет круто.

[Артур]

Вы имеете ввиду, если блоки но помещаются, чтобы выстраивались в колонку? Вроде такая концепция адаптивной верстки, если я не ошибаюсь)

Answer 1

[Anton Guz]

Встречный вопрос:
А как вы решаете проблему верстки при resize окна? (например перевод планшета из landscape в portrait создаст изменение геометрии окна)

Очевидный ответ:
Да, медиа-запросы помогают решить часть проблемы, но не главную. Главный фикс - проценты (или другие относительные еденицы) в величинах контейнеров на странице.

Comments

[Артур]

С планшета альбомной ориентации, с ресайзом страницы все отлично.

[Anton Guz]

Артур Кудаев мой вопрос был риторическим, и не касался конкретного проекта.

Конкретно в вашем случае с test1.webinme.ru :
- вы используете два конфликтующих подхода. Первый (font-size in em) + плагин, который делает "магию" с поддержкой "правильного" font-size при масштабировании. Второй - использовать проценты в геометрии блоков и фиксированной max-width для .wrapper. Выберете один: или em(rem) или %.
- это сложно сразу верстать, учитывая масштабирование, разные dpi экранов и их разные габариты. Начните с атомарных блоков. Например шапки (header). Разбейте на минимальные блоки и определите как для них должна вести себя геометрия в зависимости от экрана, подергайте рамки окна броузера.
- откажитесь от .conect:before в пользу отдельного тега: со стороны бекенда у вас не будет способа переопределить фон.
- почитайте про поведение процентных значений в свойстве padding

В вашем вопросе нет бага, чтобы кто-то вам мог помочь. Тут есть не до конца продуманный подход, с которым справиться сможете только вы. Учтите только, что по-хорошему, вам придется переверстать эту страницу еще два раза. Заложите это в ваш эстимэйт.