CSS Elastic Fluid Mayout соответствует различному дисплею контента

Сегодня, когда мониторы пользователей становятся все больше и больше, предыдущая сплошная ширина 1024*768 становится все более и более неуместным. .

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

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

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

Сначала построить структурный слой:

Давайте проанализируем слой структуры. Чтобы спроектировать это?

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

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

Таким образом, текст заголовка плавает верхнему слою Haider.

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

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

Этот блог - конкретный случай. и содержание текста всегда отображается в центре.

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