Jump to content
  • Sign Up
  • 0

Верстка адаптивного дизацна. Сетка


SnowSilver

Question

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

а еще, колонка как бы одна большая ? и в мобильная версии оодна, но меньшего размера

и в большой версии как мне кажется, должна быть линия разделения двух изоображений(контейнеров), то есть там 2 блока должно быть

на сколько колонок нужно бить ? по своему усмотрению ? я вижу, что можно на четыре побить, не больше, судя по шапке

 

можете пояснить эти моменты

Безымянный.jpg

Link to post
Share on other sites

11 answers to this question

Recommended Posts

  • 0

Сетки обычно в bootstrap. Есть разные разрешения сеток. В интернете есть множество видеороликов на тему грид системы bootstrap. В BS 12 колонок.

Link to post
Share on other sites
  • 0

Не очень понятен вопрос, но подобный макет можно сверстать с использованием сетки boostrap 4 очень легко. Как я понял, вас смущают горизонтальные секции? Это просто еще один контейнер, с вертикальными колонками, как и всегда.

  • Like 1
Link to post
Share on other sites
  • 0
1 час назад, IvanRu08 сказал:

Как я понял, вас смущают горизонтальные секции? Это просто еще один контейнер, с вертикальными колонками, как и всегда.

Это так в шапке 4 линиями показано, какой высоты должне быть контейнер для десктопа или мобильной версии? 
Если бы вы создавали сетку, на сколько колонок бы вы поделили ? 

Link to post
Share on other sites
  • 0

Горизонтальные направляющие даны для того чтобы показать как выравниваются соседние элементы по вертикали, либо для подсчета отступов, вертикальных размеров, если не понятно то уточнять у дизайнера, если это скачанный макет, то либо смотрите чем горизонтальные направляющие могут вам помочь, либо не обращайте внимания :)

51 минуту назад, SnowSilver сказал:

и в большой версии как мне кажется, должна быть линия разделения двух изоображений(контейнеров), то есть там 2 блока должно быть

так и есть, там два блока по 50% ширины

 

52 минуты назад, SnowSilver сказал:

на сколько колонок нужно бить ? по своему усмотрению ? я вижу, что можно на четыре побить, не больше, судя по шапке

тут опять же - либо к дизайнеру, либо решать самому.

зы: а что вы тут на 4 колонки разбивать собрались?

  • Like 1
Link to post
Share on other sites
  • 0
1 час назад, AlexZaw сказал:

зы: а что вы тут на 4 колонки разбивать собрались?

В футере можно увидеть 4 колонки, разве нет?

Какую бы вы использовали сетку для данного макета ? на сколько ячеек(колонок) ?

Edited by SnowSilver
Link to post
Share on other sites
  • 0
27 минут назад, SnowSilver сказал:

В футере можно увидеть 4 колонки, разве нет?

Какую бы вы использовали сетку для данного макета ? на сколько ячеек(колонок) ?

В футере 3 колонки на самом деле, видно по разделителям.

На мой взгляд тут вообще нет смысла в сетке, просто задать блокам процентную ширину.

Для контента 50%, для футера 50%, 30%, 20%, а для мобильной версии прописать один медиа запрос в котором переопределить ширину блоков в 100%

Link to post
Share on other sites
  • 0
4 часа назад, SnowSilver сказал:

Это так в шапке 4 линиями показано, какой высоты должне быть контейнер для десктопа или мобильной версии? 
Если бы вы создавали сетку, на сколько колонок бы вы поделили ? 

Шапка надо делить на две колонки, а футер - на три

  • Like 1
Link to post
Share on other sites
  • 0
23 часа назад, AlexZaw сказал:

На мой взгляд тут вообще нет смысла в сетке, просто задать блокам процентную ширину.

Но если несколько страниц, то наверное можно применять сетку ?

я щас смотрю в макете, там для дестопа, ширина между крайними линиями 2750px - это не много ? я сколько немного верстал, ширина максимально обычно в районе 1000, но ни как не две тысячи, наверное макет расчитан для больших мониторов

Edited by SnowSilver
Link to post
Share on other sites
  • 0
14 минуты назад, SnowSilver сказал:

Но если несколько страниц, то наверное можно применять сетку ?

 

все зависит от ситуации, запретить вам никто не может.

17 минут назад, SnowSilver сказал:

я щас смотрю в макете, там для дестопа, ширина между крайними линиями 2750px - это не много ?

Вы случайно не с вариантом для мобильной версии замерили? :),

Я понимаю если бы тут было много горизонтальных элементов на странице, а так,  если вы все таки правильно измерили,  это называется дизайнер дорвался до большого монитора :) 

  • Like 1
Link to post
Share on other sites
  • 0
В 10/30/2017 в 21:41, AlexZaw сказал:

я щас смотрю в макете, там для дестопа, ширина между крайними линиями 2750px - это не много ?

а это не может быть макет для ретины?) и если это так, то такие макеты верстаются со всеми размерами/2 для обычных дисплеев получается?)

Edited by SnowSilver
Link to post
Share on other sites
  • 0

Возможно и для ретины. Для обычных дисплеев можете делить размеры на 2 или почитайте вот тут https://habrahabr.ru/post/150071/

  • Like 1
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy