Я являюсь разработчиком веб-интерфейсов, и хотя я разработал некоторые макеты, я не утверждаю, что я был «экспертным дизайнером» любым способом. Но у меня есть большой опыт, который на самом деле создает отзывчивые проекты в HTML, CSS3 и Javascript, так что вот где мой опыт и комментарии ниже:
Я кратко прочитал системные сетки и, хотя они могут быть полезны, они действительно используют их - основная идея адаптивного дизайна состоит в том, чтобы просто создавать макеты, которые не требуют фиксированного размера, а затем объединяются с запросами на медиа («состояния привязки»). Для веб-страницы у меня обычно есть 3 макета: мобильная/малая версия, средняя и большая. Каждый может масштабировать ширину около 250 пикселей (содержимое может динамически расширяться внутри своего контейнера, масштабировать изображения и т. Д.), А затем, когда вы становитесь слишком большими, вы «привязываетесь» к следующему более крупному макету. Например:
небольшая компоновка: 250px до 450px (1 колонка)
среды компоновки: 450px до 800px (2 колонки)
большого макета: 800px до 1300px (3 колонки)
таким образом, нет столбца никогда не меньше, чем о 250px и никогда больше, чем 450px, так что каждый столбец должен быть в состоянии протянуть около 200px.
Лично я бы начал с чего-то простого такого, а потом после того, как вы сыграли с ним некоторые, затем прочитайте еще несколько и, возможно, попробуйте включить систему сетки.
И если вы пытаетесь на самом деле построить интерфейс в HTML/CSS3, я бы просто начал с использования макетов flexbox CSS3 (вы также можете использовать «float» с процентами, если вы хотите поддерживать IE и старые браузеры но это немного сложнее):
http://www.html5rocks.com/en/tutorials/flexbox/quick/
число столбцов ... но что система сетки должны делать с адаптивный веб-дизайн? –
, чтобы создать жидкую сетку, может быть? или я ошибаюсь в понимании этой сетчатой системы? –