2014-01-03 9 views
0

Это следующий вопрос к тому, который я задал раньше:css - width property

«CSS - положение элементов при изменении размера окна».

Проблема была в том, как избежать того, чтобы элементы были отброшены, когда экран становится меньше.

Ответ был - использовать статическую ширину.

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

Скажем я использовать изображение в качестве фона для заголовка сайта и еще один для нижнего колонтитула.

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

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

Использование ширины: 100% кажется решением, но затем я нахожу себя там, где я начал.

Как я могу выполнить оба?

Спасибо.

ответ

1

Это является причиной того, что мы имеем CSS запросы средств массовой информации и максимальную ширину, максимальная высота атрибутов

Медиа запросы позволяют изменять CSS в зависимости от того, насколько большой размер экрана. Плюс они могут сделать намного больше.

http://www.w3schools.com/css/css_mediatypes.asp

Что бы я сделать, это создать свой сайт с максимальной шириной: someamount и шириной: 100%. Как только вы закончите, не беспокойтесь о том, чтобы выглядеть лучше на небольших экранах.

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