воскресенье, 30 августа 2015 г.

Конспект курса Responsive Web Design Fundamentals by Udacity, week 4. Responcive Patterns

Существуют четыре основных паттерна Responcive Design:
  • Mostly Fluid
  • Layout Shifter
  • Column Drop
  • Off Canvas


Column Drop - самый простой

Реализация
Голубой, зеленый и синий контейнеры - это элементы div.
<div class="container">
<div class="box dark_blue">
<div class="box light_blue">
 <div class="box green">
</div>

У контейнера должны быть свойства flex и wrap:
.container {
display:flex;
flex-wrap:wrap;
}

Всем дивам ставим свойство ширины 100%, это для случая, когда ширина экрана менее 450 пикселей.
.box {
width:100%;
}

Допустим, при ширине экрана 450 пикселей мы хотим вот такое распределение квадратиков:

Итак, пишем для этого media-query вот такое:
@media screen and (min-width: 450 px) {
.dark-blue {
width:25%;
}
.light-blue {
width:75%;
}
}

Затем добавим еще одну точку в 550 пикселей.

@media screen and (min-width: 550 px) {
.dark-blue, green {
width:25%;
}
.light-blue {
width:50%;
}
}

Вот здесь можно посмотреть файлик и, открыв его в Google Chrome с девелоперской панелью (напомню, Ctrl+Shift+J) опробовать, как работает.

 Mostly Fluid - очень похож на Column Drop

По мне так тот же самый Column Drop, только чуть сложнее. Контейнер и его свойства такие же, как в предыдущем примере.

Первая точка - 450 пикселей - для двух прямоугольников, зеленого и голубого, делаем width:50%;, остальные не трогаем.
@media screen and (min-width: 550 px) {
.light-blue, .green {
width:50%;
}
}

 Следующая точка - 550 пикселей. Добавляем правила для красного, оранжевого и темно-синего, переписываем правило для зеленого (он теперь занимает не половину, а треть экрана, как видно из картинки).
@media screen and (min-width: 550 px) {
.light-blue, .dark-blue {
width:50%;
}

.orange, .green, red {
width:33.33333%;
}

А когда ширина экрана становится более 700 пикселей, появляются поля.
@media screen and (min-width: 700 px) {
.container {
width:700px;
margin-left:auto;
margin-right:auto;
}

Layout Shifter Pattern

Этот паттерн, вероятно, самый отзывчивый из всех.
 С его помощью мы можем не только изменять ширину элементов, но и корневым образом менять их порядок (розовый элемент сначала - самый последний, потом становится сбоку, самым первым; сиреневый сперва первый, потом становится боковым левым, потом боковым правым).
Для этого используется элемент CSS - order.

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

<div class="container">
<div class="box dark_blue">
 <div class="container" id="container2">
<div class="box light_blue">
 <div class="box green">
</div>
</div>

 Кроме того, изменяем свойства класса container из предыдущего примера: добавляем width:100%;. Таким образом, элементы внутри занимают всю ширину контейнера. Пока не применено ни одной точки разрыва, работает стиль по умолчанию: каждый элемент занимает 100% ширины контейнера.

.container {
width:100%;
display:flex;
flex-wrap:wrap;
}

Всем дивам ставим свойство ширины 100%, это для случая, когда ширина экрана менее 450 пикселей.
.box {
width:100%;
}

Первая точка у нас будет на 500 пикселей. В этом случае media query меняет ширину синего элемента и контейнера с голубым и зеленым на 50% для каждого из них.

@media screen and (min-width: 500 px) {
.dark_blue {
width:50%;
}

#container2 {
width:50%;
}
}

Красный контейнер пока не меняется.

Следующая точка - 600 пикселей. Тут начинается самое интересное :) Для начала установим ширину контейнера с голубым и зеленым на 50% (это наследуется с предыдущей точки, поэтому специально прописывать не надо, но можно просто повторить для ясности), а для красного и синего элементов - по 25%.

@media screen and (min-width: 600 px) {
.dark_blue {
width:25%;
}

.red {
width:25%;
}

#container2 {
width:50%;
}
}

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

@media screen and (min-width: 600 px) {
.dark_blue {
width:25%;
order:1;
}

.red {
width:25%;
order:-1;
}

#container2 {
width:50%;

}
}

Также, если кто вдруг забыл, какие именно цифры используются, - неважно, главное, чтобы они шли по порядку. То есть можно было с таким же успехом, например, присвоить #container2 значение order 100, а .dark_blue - 200, и тогда первым (с дефолтным нулем) шел бы красный элемент. Сейчас же у нас самый маленький порядок, -1, имеет опять же красный элемент, он и отображается первым.

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

 Off Canvas

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

В коде у нас два элемента.

<nav id="drawer" class="dark_blue">
<main class="light_blue">
</main>

Чтобы элементы занимали всю ширину Viewport, надо прописать следующее:
html, body, main {
height:100%;
width:100%;
}

Затем сформируем стиль для элемента nav. Установим ширину 300px (следует выбирать разумную величину, чтобы она не перекрывала viewport).
nav {
width: 300px;
height: 100%;
position: absolute;
transform:translate (-300px, 0);
transition: transform 0.3s ease;
}
"transform:translate (-300px, 0);" используется, чтобы отдалить элемент с экрана влево на 300 пикселей, а "transition: transform 0.3s ease;" для плавной анимации.

Когда нужно будет отобразить данный элемент, добавляем класс open, который переписывает transform.
nav.open {
transform:translate (0, 0);
}

А теперь добавим media screen, который на точке в 600 пикселей будет все отображать в нормальном виде.

@media-screen and (min-width:600 px) {
nav {
position: relative;
transform:translate (0, 0);
}
 body {
display:flex;
flex-flow: row nowrap;
}
main {
width: auto;
 flex-grow:1;
}
}

Добавление элементу main свойства  flex-grow:1; позволяет элементу занять всю оставшуюся ширину viewport.

Комментариев нет:

Отправка комментария