@Vladlenin

8 пиксельные сетки — а надо ли?

Пирвет! Увлекаюсь веб-дизайном как хобби, собирая по крупицам что-то интересное на хабре или ютубе и у меня возник ступор на создании адаптивов, мобильных версий сайта или приложений. Узнал, что именно для приложений дизайн рисуется по отдельным канонам - так называемым гайдлайнам от IOS или Android, где строго используется правило 8 или 4 пиксельных сеток, ибо создается все на своих языках программирования. Но тут же у меня возникает вопрос - если я хочу нарисовать мобильную версию сайта или создать адаптив под смартфон - необходимо ли юзать эти сетки или можно обойтись классическими направляющими (например вместо 12 колонок для ПК использовать 4 для смартфона?) ведь здесь используются иные правила верстки в отличие от создания приложений? Спасибо!)
  • Вопрос задан
  • 285 просмотров
Пригласить эксперта
Ответы на вопрос 4
@itisksey
Я использую 8-пиксельные сетки и для веба.
Они на самом деле нисколько не мешают использованию колонок — они работают на микроуровне.
Если колонки нужны для размещение блоков на странице, то 8-пиксельная сетка снимается вопросы:
- Какую высоту инпута мне использовать? 47 или 50? Ты просто берешь 48px;
- Какой отступ мне взять между элементами? 10 или 15? Ты берешь 8 или 16px. 12px к слову тоже можно — это 1,5 шага 8-пиксельной сетки;
- И другие подобные.

В общем колонки и 8-пиксельные сетки служат разным целям, и на вебе последние тоже полезны.
Ответ написан
AntonLitvinenko
@AntonLitvinenko
HTML coder
Немного не так это работает. Самая распространённая это 12 колонок сетка. Она и на мобиле будет 12 колонок, но элементы будут занимать большее количество колонок по ширине.
Собственно для мобилки можете сетку не рисовать вообще, зачастую это поток в один, максимум два элемента шириной
А если вы вообще не нарисуете дизайн для мобилки, то верстальщик все равно сверстает адаптив
Ответ написан
Возможно будет полезно почитать: https://getbootstrap.com/docs/4.0/layout/grid/
Я не предлагаю использовать bootstrap, всего лишь посмотреть, как он работает

Или последняя бета версия: https://getbootstrap.com/docs/5.0/layout/grid/
Ответ написан
DavidGof
@DavidGof
JS Developer
Еще один плюс за 12 полосную сетку для Web исплючительно.
Ответ написан
Ваш ответ на вопрос

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

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