Каковы некоторые рекомендации по поддержке нескольких разрешений в веб-приложении?

Question

Каковы некоторые рекомендации по включению веб-приложения для поддержки нескольких разрешений? В частности, разрешения, которые широкоэкранные и нормальное соотношение сторон.

Не похоже, что есть простой ответ - кроме простой поддержки нескольких фиксированных разрешений и использования некоторого абсолютного позиционирования для правильной работы макета.

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

Есть ли у кого-нибудь хорошие ресурсы по этой проблеме?

Answer 1

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

Вот хорошая статья, объясняющая различные макеты, включая макет жидкости.

http://www.maxdesign.com.au/presentation/liquid/

PS. вышеупомянутый сайт (maxdesign.com.au) использует саму разметку, поэтому попробуйте изменить размер браузера при чтении статьи.

Answer 2

В Opera и Safari (особенно их мобильных версиях) вы можете использовать мультимедийные запросы CSS3 , которые позволяют объявлять совершенно разные стили для разных разрешений экрана.

Это можно эмулировать в других браузерах, используя Javascript - Alistapart: Switchy McLayout

Answer 3

Один быстрый, простой и достаточно надежный способ - использовать структуру, такую ​​как Blueprint или 960gs , для размещения сайта. Они не зависят от браузера, поэтому вам не нужно об этом беспокоиться, и они делают большинство макетов столбцов довольно легкими.

Они оба работают над идеей создания контейнера фиксированного размера где-то между 900 и 1000 пикселей в ширину для вашего контента. Большинство людей в настоящее время работает по крайней мере в 1024x768. Если вам нужно больше ширины, чем это для вашего контента, вы, вероятно, делаете это неправильно.

Единственная область, где ~ 960px может не работать, это мобильные телефоны ... но для этого нужны таблицы стилей для мобильных устройств , верно?

Answer 4

У вас есть два варианта:

1. Схема с фиксированной шириной
2. Схема потока

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

Answer 5

Вы также можете использовать проценты для установки ширины и высоты, но иногда это также сложно.