адаптивная реализация сетки сетки

Я собираюсь создать отзывчивый веб-дизайн за несколько недель. Я много читал о гибком веб-дизайне, и один из методов - о сетчатой ??системе. Есть 978 сетчатая система, или 12-ти столбцовая система и т. Д. Я просто не уверен, для чего он предназначен, и как реализовать файлы, которые уже предоставлены на веб-сайте. Пример для веб-сайта: http://960.gs/

И не могли бы вы объяснить мне, что такое разница между 24 сетками столбцов, сеткой с 12 столбцами, 16 столбцами и многими другими?

Спасибо за совет.

responsive-design,

3

Ответов: 2


1

Я разработчик веб-интерфейса, и хотя я разработал некоторые макеты, я не утверждаю, что я был «экспертным дизайнером». Но у меня есть большой опыт, который на самом деле создает отзывчивые проекты в HTML, CSS3 и Javascript, так что здесь мой опыт / комментарии проистекают из:

Я также кратко прочитал сетевые системы, и, хотя они могут быть полезны, я их действительно не использую - основная идея откликающегося дизайна заключается в том, чтобы просто создавать макеты, которые не требуют фиксированного размера, а затем объединяют их с медиа-запросами («защелкивающиеся состояния»). Для веб-страницы у меня обычно есть 3 макета: мобильная / малая версия, средняя и большая. Каждый может масштабировать ширину около 250 пикселей (содержимое может динамически расширяться внутри своего контейнера, масштабировать изображения и т. Д.), А затем, когда вы становитесь слишком большими, вы «привязываетесь» к следующему более крупному макету. Например:

  • малый макет: 250px до 450px (1 колонка)

  • средний макет: от 450 до 800 пикселей (2 колонки)

  • большой макет: 800px до 1300px (3 колонки)

Таким образом, ни один столбец никогда не будет меньше 250 пикселей и никогда не будет больше 450 пикселей, поэтому каждый столбец должен иметь возможность растягиваться примерно на 200 пикселей.

Лично я бы начал с чего-то такого простого, а потом после того, как вы сыграли с ним некоторые, затем прочитайте еще несколько и, возможно, попробуйте включить систему сетки.

И если вы пытаетесь на самом деле построить интерфейс в HTML / CSS3, я бы начал с использования макетов Flexbox CSS3 (вы также можете использовать «float» с процентами, если вы хотите поддерживать IE и старые браузеры, но это немного труднее):

http://www.html5rocks.com/en/tutorials/flexbox/quick/


0

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

.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%;}

для 24 и 16 сетки вы можете соответствующим образом разделить.

I hope so that it may help you understand better.
отзывчивый дизайн,
Похожие вопросы