Как создать адаптивный дизайн?

Объясните чайнику как создавать адаптивный сайт. У меня есть созданный шаблон сайта для ноута под расширением 1920х1200. Но что делать дальше ---

а) отрисовывать этот дизайн под каждое устройство?(смартфон, планшет, ноут, ПК)
б) Отрысовывать под каждое расширение ? но сколько таких расширений?
в) Использовать фреймворки ? Но какие и как они работают?
  • Вопрос задан
  • 670 просмотров
Пригласить эксперта
Ответы на вопрос 5
gzhegow
@gzhegow
aka "ОбнимиБизнесмена"
Смысл адаптивного дизайна - в медиа-запросах
Поскольку устройств десятки - писать для каждого класса адаптивный дизайн - это пустая работа, потому что стили будут в большинстве своем одинаковые.
В связи с этим придумали - колоночный дизайн, который заранее задает стили для т.н. колонок, которые выстраиваются в строку - если место есть, и в столбик, если места нет.

Это работает либо инлайн-блоками, либо флоатами.
Если инлайн-блоки - нужно родительскому элементу постоянно занулять размер шрифта. А в колонке возвращать его обратно. Плюсы - можно выровнять колонки по центру если нужно (редко нужно на самом деле, чаще создают второй контейнер с отступами).
Если флоатами - вешать на родительский элемент clearfix. Ну и разумеется выравнивание по центру САМИХ КОЛОНОК будет недоступно. Кроме того - работа с float: left; весьма специфична по наследованию максимальной высоты, например, когда вы хотите сделать форму для ввода в которой в одной колонке находится лейбл, а в другой поле, при этом форма должна выглядеть ровно - вы задаете строке min-height: 30px например, а потом попытка сеткой унаследовать этот min-height: сломает вашу сетку к чертям.

Короче, используйте inline-block;

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

>> БЭМ
.grid.grid_size_12
  .grid_col.grid__col_size_2.grid__col_size_4mobile


Вышеуказанный код работает примерно так - по-умолчанию в строке помещается 12х, внутри находится колонка которая по умолчанию занимает 2/12 = 1/6 экрана, на мобильном 4/12 - 1/3 экрана по ширине.

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

Напишите свою сетку, это не так сложно, а потом вы сможете задавать отступы колонкам примерно в таком виде
.grid {
  display: block;
  font-size: 0;
  box-sizing: border-box;
  min-height: inherit;
  max-height: inherit;
  height: 100%;
}

/* здесь не нужна вложенность, на класс будут навешиваться другие классы */
/* мы указываем "начинается с класса", чтобы каждый раз не писать .grid__col.grid__col_size_2 а просто писать grid__col2 например */
[class^="grid__col"] {
  display: inline-block;
  vertical-align: top;
  font-size: 1rem; /* постоянно следите за этим размером шрифта, он еще не один раз напомнит о себе */
  box-sizing: inherit;
  height: 100%;
  min-height: inherit;
  max-height: inherit;
}

/* циклы */
.grid_col_size_12 .grid__col_size_12 {
  width: 100%;
}
.grid_col_size_12 .grid__col_size_6 {
  width: 50%;
}
/* и т.д. */

.grid_project_foo {
  margin: 0 -8px -16px;
}

.grid_project_foo .grid__col {
  padding: 0 8px;
  margin-bottom: 16px;
}


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

P.S.
Только что проверил колонки с float: left. Их ломает min-height - они перестают влазить по ширине, а если убрать min-height: - не будет работать выравнивание по высоте. А причина в том, что отрицательный маргин ломает все флоаты к чертям. Так что да, единственный нормальный вариант это inline-block.

Если вам нужно раскрасить колонки - используйте table, table-cell, которое на мобильных устройствах (после перестраивания в столбик) превратится в block, inline-block.
Ответ написан
Если по хорошему, то всё зависит от того, сколько у Вас будет контрольных точек.

Допустим минимальная ширина сайта равна 320px, значит начальных макет будет шириной 320px. Первая контрольная точка у нас на ширине 768px, значит второй макет будет шириной 720px, ну и путь последняя контрольная точка у нас будет 1024px, значит последний макет будет 1024px.
Ответ написан
Комментировать
Вариант В - getbootstrap.com (на русском http://bootstrap-3.ru)
естественно нужно будет править media под себя
Ответ написан
В любом случае отрисовать придется под популярные устройства и проработать UI, даже с бутстрапом Вы должны понимать, как все будет выглядеть на малых экранах.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы