четверг, 16 июля 2015 г.

Конспект курса Responsive Web Design Fundamentals by Udacity, week 3, часть 2. Кошмар и Flexbox

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

Вместо этого брейкпойнты следует размещать, исходя из контекста.


Пример с простым сайтом http://skinnyties.com/:

Разрешение меньше 480, изображения большие, выстроены в колонку, меню сверху - кнопочками

Разрешение более 480 (в 480 - брейкпойнт), изображения стали меньше, но выстроились в два рядка, меню стало выглядеть по-нормальному

Разрешение больше 750, картинки в один ряд.
Существуют паттерны расставления breakpoints. Самый простой и известный - grid fluid system (пример: http://www.html5rocks.com/en/, число колонок уменьшается при изменении размера).

Flexbox

Один из мощных инструментов для создания разметки. Поддерживается большинством браузеров. Одно из хороших свойств - заполнение пространства, т.е. пространство вокруг элемента расширяется либо сужается в зависимости от ширины окна.
 Здесь у нас три дива (цветные квадратики), которые в отсутствие свойства display:flex; отображались бы в столбик, один за другим. При применении этого свойства элементы устанавливаются в одну строчку, занимая всю ширину окна браузера, меняя свои размеры.
Если добавить свойство flex-wrap:wrap; , то при уменьшении ширины окна элементы будут перемещаться на следующую строчку, сохраняя свои размеры (будут сужаться, только если уже все стоят столбиком).
С помощью viewport и атрибута order можно менять порядок элементов в зависимости от ширины окна.
Вот так можно сделать дизайн, похожий на "плиточный", а затем менять ширину элементов в зависимости от размера экрана с помощью viewport.
(правда, в следующем за заданием квизе почему-то нумерация началась с нуля. Главное, чтобы числа были восходящими, т.е., например, 1,3, 8, 12 будет работать точно так же как и 1, 2, 3, 4, другое дело что поступать так лучше с какой-то целью, а не просто от балды). 

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

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