Четверг, 03 Января 2013 14:30

Резиновая верстка. Краткий обзор

Written by 
Оцени эту запись
(6 Голоса)

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

 

  • Max-width, min-width
  • Зачем нужна max-width
  • Выравнивание
  • Плюсы резиновой верстки
  • На что нужно обратить внимание

 

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

 

 

<div style="width: 100%; background: pink; height: 300px;">
         <div style="width: 300px; margin-right: -300px; float: left; background: green; height: 300px;"></div>
         <div style="padding-left: 300px; background: blue; height: 300px;">
                  <div style="float:right; margin-left: -200px; width: 200px; background: red; height: 300px;"></div>
                  <div style="padding-right: 200px; background: yellow; height: 300px;"></div>
         </div>
</div>

 

Max-width, min-width

 

Первое, что могу рекомендовать при создании резинового макета - это задать ему минимальную и максимальную ширину. Это можно сделать для body или основного контейнера:

 

body {

   min-width: 800px;

   max-width: 1500px;

}

 

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

 

Зачем нужна max-width

 

Максимальная ширина для резиновой странички нужна в первую очередь для читаемости текста. На очень большом мониторе, с размером экрана 2560*1600px, ваша статья превратится в несколько очень длинных строчек. А это не очень красиво и совсем не удобно для чтения. Также большие размеры мониторов могут негативно повлиять на дизайн. Представьте, что в шапке сайта есть облака. Например, слева, справа и посредине. При малом размере окна, они равномерно заполняют шапку. Но при увеличении размера они расползаются по краям, убивая всю красоту. Ирония судьбы заключается в том, что еще пару лет назад рекомендовали делать фиксированные макеты, шириной не меньше 1000px, чтобы поддерживать маленькие мониторы, а теперь решаем проблемы с очень большими. 

 

Если по каким-то причинам вы не можете поставить максимальную ширину или при ней текст тоже не очень удобно читать, то можно разбить текст на колонки.

 

Выравнивание

 

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

 

div {

   margin: 0 auto;

}

 

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

 

Плюсы резиновой верстки

 

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

 

Также не мало важно дать пользователю возможность выбирать самому размер окна браузера и ширину сайта (контента на сайте).

 

Резиновая верстка отлично подойдет сайтам с большим количеством информации и информационных блоков.

 

На что нужно обратить внимание

 

Сделать резиновый сайт очень сложно. Это ведь не просто width: 100%. Нужно следить, чтобы дизайн и контент отображались корректно. А также, чтобы функциональные блоки действительно занимали все возможное пространство. Итак дам несколько советов, на что нужно обратить внимание при создании резинового макета:

 

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

 

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

 

 -- заполнение полезного пространства нужно делать и для внутренних элементов. Например, при отображении блоков в виде плитки (фотографии, список товаров или категорий) нужно давать им возможность выводить в таком количестве, которое помещается на странице. Это можно сделать простым обтекание float:left. Также можно предусмотреть перестраивание блоков при изменении размеров. Например, блок "Последние новости" может находиться справа от контента при размере окна 1500px или под контентом при 1000px. 

 

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

 

 

 

 

 

 

Additional Info

Комментарии  

 
0 #1 Влада 19.01.2015 18:52
А здесь генератор резиновой верстки
http://prohtml.net/services/templater
 

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов