Как лучше реализовать мобильную верстку?

Question

[OxygenMan]

Здравствуйте! Я хотел узнать вот что. У меня есть вот такой блок section, находящийся строго по центру страницы. Но на мобильном телефоне нужно сделать так, чтобы он был просто во весь экран и более узок в ширине. Как это можно реализовать? Только медиа-запросами?

Answer 1

[WapSter]

body {

  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  
}

section {
  max-width: 600px;
  width: 100%;
  background: red;
  min-height: 200px;
}

Comments

[OxygenMan]

Здравствуйте! Спасибо большое за ответ! А ширину в этом случае я могу настраивать как угодно и это не будет влиять ни на что?

Answer 2

[Александр Бурыхин]

Да, либо с помощью flexbox. Она адаптируется, но, скорее всего, придется все равно медиа запросы менять.

Comments

[OxygenMan]

Благодарю за ответ! Я так понимаю, что на определенном минимальном разрешении мобильных экранов мне нужно будет увеличить блок во весь экран и все элементы внутри него?

[Александр Бурыхин]

Если верстать через флекс, или хотя бы bootstrap, то он начнет "прыгать" самостоятельно.

То есть он отцинтрован на основном экране.

И в бутстрапе он всегда будет в центре, там в основном нужна "косметическая" правка.

Элементы сами начнут вытягиваться, единственная проблема, что мне приходит в голову- это размер шрифта. Его точно придется прописывать медиа запросами, если не хотите, чтобы на большом экране и маленьком он был одинаковым.

[OxygenMan]

Александр Бурыхин, Спасибо за ваш ответ! Я только что попробовал сделать это на bootstrap. Мой блок занимает 8 ячеек в сетке. col-lg-8. Но в хроме (в этом режиме, где можно менять размер окна под определенные размеры экранов) адаптивность не работает. Может, проблема в браузере, потому что он часто неправильно отображает все это.

[Александр Бурыхин]

Смотрите, bootstrap состоит из 12 блоков.

И сам div должен быть в div-ах "row" и "container"

Далее. Так как у вас, по сути, один блок, можно написать col-12

Так как блок должен занять все место

А если писать col-lg-8 то он займет часть, получается, 75% всего блока.

И это при ширине экрана больше 1200 px,если не ошибаюсь.

Вообще, очень советую изучить bootstrap и flexbox подробно. Очень удобные вещи

[OxygenMan]

Александр Бурыхин, Спасибо, ознакомлюсь подробнее!

[Александр Бурыхин]

OxygenMan, пожалуйста, если какие-то вопросы еще возникнут, обращайтесь

[OxygenMan]

Александр Бурыхин, Здравствуйте, у меня тут возник еще один вопрос. Если я поставлю col-12, то не нужно ли будет во всю ширину сетки бутстрапа увеличивать блок? Просто блок сам по себе действительно максимум на col-8 тянет и мне бы не хотелось увеличивать размеры.

[Александр Бурыхин]

Я, например, когда хочу, чтобы он занимал на 8 блоков, делаю так :

Мой контент


Не знаю, насколько это верно, но у меня работает

[OxygenMan]

Александр Бурыхин,

[Александр Бурыхин]

OxygenMan, Блин, почему-то не отобразилось.

В общем, делаю 3 блока:
2,8,2

Там, где 2-они пустые

Где 8- мой контент

[OxygenMan]

Александр Бурыхин, Хм... можно попробовать. А в мобильном варианте, когда ряд выстраивается в столбец, то отступы не появляются сверху и снизу (вот эти самые col-2)?