Эластичный гибкий макет CSS соответствует различному отображению контента

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

Конечно, чтобы уменьшить эту трату экрана, лучшим решением является использование гибкого макета. Он позволяет полностью использовать пространство экрана и отображать контент на полном экране независимо от того, какое у вас разрешение. Однако из-за различных ограничений текущие веб-страницы еще не готовы полностью принять гибкую эластичную разметку (особенно бессмысленное попирание стандартов производителями браузеров и неполную поддержку стандартов CSS и т. д.). Будучи посредником между пользователями и производителями, мы можем адаптироваться к разрыву между ними только с помощью совместимого менталитета. Поэтому как переходное решение есть такая раскладка: эластичная + раскладка фиксированной ширины.

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

Без лишних слов, давайте приступим к делу. Давайте создадим такую ​​​​структуру макета.

Сначала создайте слой структуры:

Анализ структурного уровня. Веб-страница обычно состоит из трех частей: заголовок, область содержимого и нижний колонтитул. Мы помещаем заголовок и содержимое в слой-контейнер, называемый оболочкой, и отделяем нижний колонтитул, называемый оболочкой. Почему он спроектирован таким образом? Мы хотим, чтобы этот нижний колонтитул находился абсолютно внизу, даже если область контента занимает менее одного экрана.

Мы устанавливаем ширину двух контейнеров, обертки и нижнего колонтитула, на 100%, чтобы они автоматически адаптировались к ширине экрана. А также установите ширину заголовка на 100%. Таким образом, мы можем вставить изображение, которое можно расположить горизонтально в верхнем и нижнем колонтитуле, чтобы фон верхнего и нижнего колонтитула мог заполнить все пространство экрана по горизонтали на большом экране.

Что касается основного текстового содержимого, наш общий подход заключается в том, чтобы отображать его в центре, когда разрешение становится больше, оставляя пустое пространство с обеих сторон. Поскольку ширина области заголовка установлена ​​на 100%, мы добавляем в заголовок еще один слой контейнера, который служит носителем реального текстового содержимого заголовка. Затем мы устанавливаем для него фиксированное значение ширины, например, 960 пикселей. и позвольте ему центрироваться.

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

Таким же образом можно реализовать и нижний колонтитул.

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

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

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