Адаптивный дизайн веб-страницы - сеточная видимость

Что такое сеточная видимость?

Многие веб-страницы основаны на сеточной видимости (grid-view), что означает, что страница разделена на несколько колонок:

Использование сеточной видимости очень полезно при разработке веб-страницы. Это позволяет легкоplacing элементов на странице.

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

Строительство адаптивной сеточной видимости

Давайте начнем строить адаптивную сеточную видимость.

Сначала убедитесь, что все HTML элементы box-sizing свойство установлено в border-boxТаким образом, это гарантирует, что полная ширина и высота элемента включают в себя отступы (пADDING) и рамку.

Добавьте следующий код в CSS:

* {
  box-sizing: border-box;
}

Пожалуйста, обратитесь в наш CSS Box Sizing Читать больше о свойстве box-sizing в этой главе.

Ниже приведен пример простой адаптивной веб-страницы, которая включает в себя две колонки:

25%
75%

Пример

.menu {
  ширина: 25%;
  float: left;
}
.main {
  ширина: 75%;
  float: left;
}

Попробуйте это самому

Если веб-страница содержит только две колонки, то пример выше подходит.

Но, мы хотим использовать сетку с 12 столбцами, чтобы лучше контролировать веб-страницу.

Сначала,我们必须计算一列的百分比：100% / 12 столбцов = 8.33%.

Затем, мы создаем класс для каждого из 12 столбцов, то есть class="col-" и номером, который определяет количество колонок, которое это раздел должно перекрывать:

CSS:

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

Попробуйте это самому

Все эти колонки должны выравниваться влево и иметь отступ 15px:

CSS:

[class*="col-"] {
  float: left;
  padding: 15px;
  border: 1px solid red;
}

Каждая строка должна быть окружена <div> Внутри строки количество колонок должно в сумме составлять 12:

HTML:

<div class="row">
  <div class="col-3">...</div> <!-- 25% -->
  <div class="col-9">...</div> <!-- 75% -->
</div>

Все колонки в строке выравниваются влево, поэтому они выходят из потока страницы и занимают место других элементов, как будто эти колонки не существуют. Чтобы предотвратить это, мы добавляем стиль для clearing flow:

CSS:

.row::after {
  content: "";
  clear: both;
  display: table;
}

Мы还想添加一些样式和颜色，使其看起来更美观：

Пример

html {
  font-family: "Lucida Sans", sans-serif;
}
.header {
  background-color: #9933cc;
  color: #ffffff;
  padding: 15px;
}
.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.menu li {
  padding: 8px;
  margin-bottom: 7px;
  background-color :#33b5e5;
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
  background-color: #0099cc;
}

Попробуйте это самому

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