Создание адаптивного макета с помощью сетки CSS

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

Поскольку макет "Сетка" позволяет выравнивать— элементы в столбцы и строки, но не обладает структурой содержимого, он также поддерживает сценарии, вроде тех, —что были описаны в этой статье, которые невозможно либо очень трудно реализовать с помощью HTML или таблиц CSS. Кроме того, с помощью макета "Сетка" вместе с запросами носителя вы можете обеспечить поддержку вашим макетом адаптации к изменениям в конструктивных параметрах устройства, ориентации, доступном пространстве и т. д.

Спецификация CSS Grid Layout в настоящий момент представляет собой документ консорциума W3C со статусом Working Draft и частично поддерживается в Internet Explorer 10 в форме префиксов производителей. Полный список поддерживаемых свойств см. в статье Макет сетки на веб-сайте MSDN. Поскольку спецификация макета "Сетка" все еще находится на стадии разработки, поддержка в Internet Explorer 10 может не точно соответствовать тому, что запланировано в спецификации.

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

Данный раздел состоит из следующих подразделов:

Разработка страницы

Мы хотим, чтобы страница проектора занимала весь экран в Internet Explorer 10 с новым пользовательским интерфейсом Windows, без прокрутки. Разумеется, страница должна быть доступна для просмотра в классическом браузере Internet Explorer, а также должна хорошо сочетаться с хромом этого браузера.

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

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

В этом наброске A — небольшая область, предназначенная для логотипа, область B предназначена для заголовка или описания фотографии, C — это основная область для просмотра фотографии, а область D предназначена для эскизов других фотографий в альбоме.

Поскольку страница проектора предназначена для просмотра в полноэкранном режиме, нам придется учитывать различные размеры экранов. Фокус страницы находится на большой фотографии. Таким образом, при увеличении размера экрана пусть расширяется панель фотографии (C). Но мы также не должны допустить любого расширения панели A, горизонтального расширения панели B, а также вертикального расширения панели D.

Конструирование сетки

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

На этом рисунке фиолетовой пунктирной линией показан элемент "Сетка" или контейнер макета "Сетка". Линии сетки показаны красным пунктиром.

Предыдущий рисунок с фиолетовыми пунктирными линиями, добавленными вокруг всего элемента “Сетка” и красными пунктирными линиями, добавленными, чтобы показать, где нужно разместить столбцы и строки

Всего у этой сетки пять строк и три столбца:

  • Внутренними полями являются вторая и четвертая строка, а также второй столбец
  • Высота первой и последней строки фиксирована, так как фиксированы высоты панелей A и D
  • Высота третьей строки может изменяться, в результате чего макет может подстраиваться под любой размер экрана
  • Ширина первого столбца фиксирована в соответствии с фиксированными значениями ширины панелей A и B
  • Ширина последнего столбца может изменяться, чтобы макет мог подстраиваться под любой размер экрана

Структурирование страницы

Начнем размечать сетку. Для начала мы напишем простой кусок HTML, чтобы получить основную структуру страницы. Обратите внимание, что порядок разделов не обязательно совпадает с порядком в нашем примере, но в этом одно из преимуществ сетки: вы можете поменять порядок элементов в модели DOM в любой момент.


<!DOCTYPE html>
<html>

<head>
<meta content="IE=10" http-equiv="X-UA-Compatible" />
<link href="photogallerystyles.css" media="screen" rel="stylesheet" type="text/css">
<style>
</style>
</head>

<body>

<div id="body">
  <div id="grid">
    <div id="text_box" class="orange">
      Text box</div>
    <div id="big_pic" class="red">
      <img id="mainphoto" alt="mainphoto" src="images/img1.jpg"></div>
    <div id="photos" class="blue">
      Photos</div>
    <div id="logo" class="green">
      <div id="logotype">
        CONTOSO<br>IMAGES</div>
      <div id="pagedesc">
        Lightbox</div>
    </div>
  </div>
</div>

</body>

</html>


Создание элемента "Сетка" и определение строк и столбцов

Теперь создайте элемент "Сетка" и определите строки и столбцы.

Прежде всего нужно добавить элемент display и задать ему значение -ms-grid. В результате будет создан элемент "Сетка".

В элементе "Сетка" мы задаем ширину каждого столбца в разделенном пробелами списке с помощью свойства -ms-grid-columns. Аналогично с помощью свойства -ms-grid-rows мы задаем высоту каждого столбца в разделенном пробелами списке.

В результате для элемента с идентификатором "grid"наш CSS будет выглядеть следующим образом:


#grid {
  height: calc(100vh - 65px);  /* 65px to account for scrollbar */;  
  display: -ms-grid;
  -ms-grid-columns: 200px 25px 1fr;
  -ms-grid-rows: 160px 25px 1fr 25px 200px; 
  border: 1px solid red;	      /* for a visual guide */
}

Дробные единицы

Чтобы сетка могла подстраивать свой размер под доступное ей пространство, мы используем дробные доли (fr). Размер дробной доли зависит от общего доступного пространства, а также от общего числа определенных дробных долей. В нашем примере страницы проектора мы используем только одну дробную долю, но возможны также и более сложные макеты. Например, рассмотрим случай, где определены четыре столбца со следующими значениями ширины: автоматическая, 100 пикселей, 1 дробная доля и 2 дробные доли. Столбец будет выглядеть следующим образом:

  • Столбец 1 (ключевое слово auto). Столбец подстраивается под свое содержимое.
  • Столбец 2 ("100px"). Столбец имеет ширину 100 пикселей.
  • Столбец 3 ("1fr"). Столбец занимает одну часть оставшегося пространства.
  • Столбец 4 "(2fr)". Столбец занимает две части оставшегося пространства.

Поскольку всего в этой сетке имеется три части, то столбец 3 занимает 1 часть, деленную на 3 части,—или 1/3—оставшегося пространства. Столбец 4 занимает 2/3 оставшегося пространства.

Назначение элементов страницы столбцам и строкам

Если посмотреть на страницу сейчас, она определенно не готова. Все элементы страницы перекрывают друг друга, поскольку мы еще не определили, в каком столбце или столбцах будет отображаться каждый элемент. Это делается с помощью комбинации свойств -ms-grid-row, -ms-grid-column, -ms-grid-row-span и -ms-grid-column-span.

Свойства -ms-grid-row и -ms-grid-column, будучи примененными к элементу страницы, определяют ячейку сетки, в которой начинается элемент. В терминах "слева направо", "сверху вниз" свойство -ms-grid-row определяет верхнюю строку, которую будет занимать элемент. Аналогично с помощью свойства -ms-grid-columnопределяется самый левый столбец, занимаемый элементом.

Применительно к элементу страницы свойства -ms-grid-row-span и -ms-grid-column-span указывают, сколько строк и столбцов будет занимать элемент страницы.

Нужно иметь в виду, что если вы попытаетесь распространить элемент за границы определенных столбцов или строк в сетке, неявно будет создан еще один столбец или строка, и его ширина или высота будет иметь значение auto (по содержимому) для каждого столбца или строки за пределами определенного числа.


#text_box {
  -ms-grid-row: 3;
  -ms-grid-column: 1; 
  -ms-grid-row-span: 3;
  padding: 15px;
}
#big_pic {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
  -ms-grid-row-span: 3;
  padding: 15px;
}
#photos {
  -ms-grid-row: 5; 
  -ms-grid-column: 3;
  padding: 15px;
}
#logo {
  -ms-grid-row: 1; 
  -ms-grid-column: 1;
  text-align: center;
  padding: 20px;
}


Просмотрите страницу с добавленными селекторами и стилями других элементов страницы.

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

Выравнивание элементов сетки

Страница выглядит хорошо, но в идеале фотографию следовало бы поместить в центр ее панели. Для этого мы воспользуемся свойствами -ms-grid-row-align и -ms-grid-column-align. Эти свойства определяют способ выравнивания элемента в строке или столбце соответственно. В нашем случае мы установим для обоих свойств значения center на селекторе идентификатора для "big_pic":


#big_pic { 
  -ms-grid-row: 1;
  -ms-grid-column: 3;
  -ms-grid-row-span: 3;
  padding: 15px;
  -ms-grid-row-align: center;
  -ms-grid-column-align: center;
}


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

Вы можете просмотреть эту версию страницы.

Использование сетки с запросами носителя

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

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


@media all and (orientation: portrait) {

}

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

Теперь добавим новый макет "Сетка" и новый стиль для других элементов страницы. Мы добавляем стили в фигурных скобках запроса носителя:


#grid {
	-ms-grid-columns: 150px 25px 1fr;
	-ms-grid-rows: 100px 25px 1fr 25px 100px;
}
#text_box {
  -ms-grid-row: 1; 
  -ms-grid-column: 3;
  -ms-grid-row-span: 1;
}
#big_pic {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
  -ms-grid-column-span: 3;
  -ms-grid-row-span: 1;
}
#photos {
  -ms-grid-row: 5;
  -ms-grid-column: 1;
  -ms-grid-column-span: 3;
  -ms-grid-row-span: 1;
}
#logo {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  text-align: center;
  padding: 20px;
}
#logotype {
  font-size: 15px;
}
#pagedesc {
  font-size: 12px;
}
#mainphoto {
  width: 100%; 
  border-width: 10px;
  border-color: white;
}


Теперь вы можете просмотреть готовую страницу. Если у вас нет устройства, который вы можете повернуть, чтобы просмотреть страницу в книжной ориентации, откройте страницу в классическом браузере Internet Explorer и измените размер окна так, чтобы его ширина стала меньше высоты.

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

Создание наложения элементов с помощью сетки

CSS "Сетка" открывает много других возможностей для макета страницы. Например, с помощью сетки можно легко создать наложение содержимого, что в комбинации со свойством прозрачности позволяет создавать, например, полупрозрачные полосы текста поверх изображения. Чтобы получить дополнительные сведения об этом, а также увидеть наложения сетки в действии, см. статью Пример наложения сетки CSS в коллекции примеров для Internet Explorer.

Заключение

Теперь вы имеете представление о возможностях макета "Сетка" и о том, как использовать свойства сетки вместе с запросами носителя. Подробнее см. ссылки в следующем разделе.

Связанные разделы

Фотоальбом "Изображения Contoso"
Макет "Сетка"
Руководство по Internet Explorer 10 для разработчиков: макет "Сетка"
Блог IE: IE10 Platform Preview и функции CSS для адаптивных макетов

 

 

Показ:
© 2014 Microsoft