@lex63
Начинающий web-разработчик

Как правильно создать адаптивную сетку?

День добрый. В настоящее время разбираюсь с основами создания сайтов, и сейчас возник следующий вопрос. Как правильно создать свою адаптивную сетку для разработки прототипа шаблона и последующей его верстки? Понимаю, что существует множество готовых css фреймворков и библиотек, представляющих отличные сетки. Однако, сейчас хочу именно разобраться с основами самостоятельно, а не бездумно использовать готовые решения. Считаю, что с этим мне помогут ответы на следующие вопросы:
1. Какой размер или размер какого элемента принимать за минимальный?
2. Через какие breakpoint'ы управлять адаптивностью?
3. Какое количество колонок использовать для каждого breakpoint?
4. Относительно чего рассчитывать ширину колонки, отступы между ними, и высоту строк?
5. И считаю самый главный вопрос, что именно почитать? Какие есть основные книги по использованию сеток в веб?
  • Вопрос задан
  • 1564 просмотра
Пригласить эксперта
Ответы на вопрос 4
mrdubz
@mrdubz
front end developer
А ты не используй бездумно, а возьми тот же bootstrap, разберись в нем (там все очень просто, на самом деле), и посмотри как там реализованы сетка, размеры, и брейкпоинты. Там найдешь ответы на первые три вопроса.

4. Это уже, скорее всего, больше типографика.
5. Grid Layout in CSS: Interface Layout for the Web, Building Responsive Data Visualization for the Web
Ответ написан
Минимальный - 1px
Через любые: верстка может сломаться на любом разрешении
Такое, какое по дизайну
Относительно дизайна
Читай дизайн

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

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

Я все эти сетки игнорирую и делаю так, как будет оптимальнее по дизайну. Так и при создании адаптивности намного меньше ломается и удается обойтись основными точками: 960, 800, 768, 640, 540, 480, 320 (редко приходится добавлять промежуточные, часто удается игнорировать такие как 768 и 480)
Ответ написан
Вам правильно пишут, но раз хотите самостоятельно, то можете сделать через медиа запросы всю верстку самостоятельно, принцип не сложный, в зависимости от разрешения экрана пользователя изменять размеры элементов, шрифтов, скрывать ненужные элементы или показывать их на определенном разрешении, затем если нужно будет редактировать верстку на хосте будете проклинать все на свете в поиске нужных классов для каждого разрешения. В итоге поймете как все работает и запомните этот ад надолго) После этого трижды мысленно будете благодарить создателей фреймворков ибо работу они делают огромную) Но если хотите сами знать как работает адаптивная верстка то медиа запросы самый верный способ
Ответ написан
Комментировать
mcmraak
@mcmraak
php+sql+js+bicycle+crutches
У меня была схожая задача, я возможно пошёл по неправильному пути но суть и механику сетки я просто подсмотрел исследуя страницу примера getbootstrap.com/examples/grid в дебагере хрома. Бутсрап использует 12-сетку и мне кажется она самая оптимальная.
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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