Можно ли верстать медиа запросами бутстрапа?

Question

[Alibek Kulseitov]

Верстаю около двух лет, проработал свою адаптивную сетку. Но осознал что бустраповская сетка а именно хорошо подобранные медиа запросы лучше.

Я долго не могу разобраться как позиционировать элементы которые идут меньше 768px?

Потому что моя сетка идет DESKTOP FIRST. И мне намного легче это, я привык к этому.

А как правильно позиционировать элементы на медиа запросах бустрапа не используя его сетку а именно такие как col-md-2 и тд.

Comments

[Глеб Кемарский]

Я запутался, как помочь.
Работать с бутстрапом на экранах уже 768 пикселей - это одна тема для разговора.
Перейти на бутстрап, когда привык к "Desktop first" - вторая.
А работать с медиа-запросами, не используя сетку бутстрапа, - это, наверное, просто работать с медиа-запросами, отложив бутстрап в сторону.

Может быть, подкинете конкретную задачу и расскажете, как вы её решаете и что в решении не устраивает?

[Alibek Kulseitov]

Глеб Кемарский: В общем я хочу верстать медиар запросами бутстрапа но есть одна проблема. Проблема возникает именно с Mobile First. Надобности использовать сетку бутстрапа (col-md, col-lg..) нету .

[Глеб Кемарский]

Алибек Кулсеитов: Давайте на каком-нибудь практическом примере разберём? Что нужно сверстать и как оно должно зависеть от медиа-запросов?

[Alibek Kulseitov]

Глеб Кемарский: Вот например лендинг kulseitov.kz/bags В ней я использую свои медиазапросы. Но они не идеальны. Между 768px и 998px проблемка. Гляньте на лендинге моем grid.css и поймете)

[Глеб Кемарский]

Алибек Кулсеитов: Вы говорите недомолвками, а я не умею читать мысли. Сформулируйте, в чём проблема, которые вас беспокоят.

[Alibek Kulseitov]

Глеб Кемарский: Проблема именно в не совершенстве моей сетки) Между 768 и 998px; Я делаю так. Если container 1170 px то body 1200px и тд. Просто меня смущает моё использование body. Медиа запросы бутстрапа мне нравятся но как именно верстать когда меньше 768 px не пойму

[Глеб Кемарский]

Алибек Кулсеитов: Хочу понять, что вы вкладываете в свои слова. Пожалуйста, поясните другими словами:
1) в чём вы видите несовершенство свой сетки между 768 и 998 px
2) какой беды опасаетесь из-за своего использования body
3) что именно понравилось в запросах бустрапа
4) какое затруднение возникает при попытке сверстать меньше 768 px

[Alibek Kulseitov]

Глеб Кемарский: ой, я немного ошибся
1) Несовершенство когда меньше 758px. Боди и контейнер сразу становятся 480px. То есть если у дейвайса экран 600px у него контейнер будет 480.
2) Ну думаю это не правильно насильно использовать боди, то есть указывать ему строгую ширину?
3) Понравилось именно то что при сжимании окна браузера вообще отсутствует горизонтальная полоса прокуртки. В моей же когда переходишь на 998px размера экрана то появляется полоса.
4) Проблема смотрите в чем. В моей сетке для всех мобильников у меня макс ширина это 480px так? Следовательно легко можно позиционировать элементы которые будут отображатся на всех мобилках одинаково, потому что для них все действует правило 480px. Ну конечно иногда на экранах с 320px некоторые элементы вылетают и приходится еще один медиа запрос делать (когда меньше 480) но это редко.
А вот в случае с бутстрапом там когда меньше 768px нету конкретной ширины контейнера и не понятно как позиционировать элементы.

[Глеб Кемарский]

Алибек Кулсеитов: Вопрос по последней фразе. Как вы используете конкретную ширину контейнера, чтобы спозиционировать элемент? Какой-нибудь пример?

[Alibek Kulseitov]

Глеб Кемарский: Рассмотрим на основе моей сетки. У меня прописан медиа запрос
/* Small Devices, Tablets */
media only screen and (max-width: 768px) {
body{
min-width: 456px;
}
.container {
width: 456px;
}
}

Отсюда можно увидеть что для всех устройств у которых экран меньше 768 px будет контейнер 456px. Следовательно отсюда можно легко позиционировать элементы. Ведь я точною знаю что у всех устройств будет ширина 456px.

[Глеб Кемарский]

Алибек Кулсеитов: Я правильно понял, что вы прописываете размеры элементов в пикселях, поэтому любите контейнеры фиксированной ширины и не понимаете резиновые?

[Alibek Kulseitov]

Глеб Кемарский: ну думаю да, вы правильно написали

Answer 1

[Глеб Кемарский]

Я переформулировал вопросы. Если что не так, дайте знать.

1) Хорошо ли задавать min-width для body?
Если содержимого страницы завёрнуто в контейнер, то ширину лучше назначать ему, а не body. На то он и контейнер.

21) Возникает горизонтальная полоса прокрутки на переходах через границу медиа-запроса.
Это как раз min-width у body постарался. Но он здесь вообще не нужен, его работу делают медиа-запросы.

Медиа-запросы не дают помять контейнер, когда пользователь меняет размеры окна. Когда окно выходит за пределы одного медиа-запроса, управление переходит к следующему, и тот перестраивает контейнер по новым правилам. Поэтому пока действуют медиа-запросы, min-width не нужен ни для body, ни для контейнера.

min-width нужен только для самых маленьких экранов, чтобы контейнер не стал слишком узок и не помял содержимое. Поэтому в kulseitov.kz/bags/css/grid.css можно удалить все boy min-width, кроме самого маленького.

3) На экранах меньше 758px мой контейнер будет сразу 480.
На таких экранах бутстрап растягивает контейнер по ширине, - так же как ..container-fluid на более широких экранах.

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

4) Бутстрап и 480px.
Увы, в третьей версии бутстрапа исчезла отдельная категория для экранов уже 480 px. Люди просили её вернуть, но безуспешно. Поэтому занялись самоделками. Вот человек раздаёт CSS, добавляющий такую категорию к сетке бутстрапа.

5) Desktop First vs Mobile First
На Тостере много разговоров об этом.

Comments

[Alibek Kulseitov]

1 - спасибо понял, 2 - спасибо понял, 3 - проблемка ( как решить не понял) 4 - спасибо, 5 - решил попробовать mobile first
теперь смотрите что выходит) Все идеально кроме того, когда идет меньше 480 px) Как ее решить все же?
Сайт

[Alibek Kulseitov]

Алибек Кулсеитов: kulseitov.kz/norbekov

[Глеб Кемарский]

Алибек Кулсеитов: По 3 пункту. Можно переписать grid.ccs например, так.
3.1) Убрал интервалы в медиа-запросах. Во-первых, они накладывались на границе. Во-вторых, "лесенку" из верхних ограничений проще сопровождать. Нет шанса проглядеть дырку между интервалами.
3.2) Закомментировал оверфлоу в конце. Не успел сообразить, какую задачу он решает.
3.3) Медиа-запрос для больше 992px не нужен. Он задавал контейнеру ширину, которая и так у него есть..

/*==========  Desktop First Method  ==========*/

.container {
  margin-left: auto;
  margin-right: auto;
  width: 970px;
}

.container-fluid {
  margin-right: auto;
  margin-left: auto;
}

.container,
.container-fluid {
  padding-left: 15px;
  padding-right: 15px;
}

.row {
  margin-left: -15px;
  margin-right: -15px;
}

.container::after,
.container-fluid::after,
.row::after {
  display: table;
  clear: both;
  content: "";
}

@media only screen and (max-width: 992px) {
  .container {
    width: 750px;
  }
}

@media only screen and (max-width: 768px) {
  .container {
    margin-right: auto;
    margin-left: auto;
    min-width: 456px;
 /* overflow: hidden; */
  }
}

[Глеб Кемарский]

Алибек Кулсеитов: Сайт посмотрю вечером или завтра.

[Глеб Кемарский]

Алибек Кулсеитов: Посмотрел сайт и kulseitov.kz/norbekov/css/grid.css
Нет медиа-запроса для экранов уже 480px, поэтому на них показывается то же, что и на экранах шире 1200px. Надо прописать стили для случая:

@media (max-width: 479px) {
}

[Alibek Kulseitov]

Глеб Кемарский: то есть надо прописать этот медиа запрос и позиционировать элементы для минимальной ширины 320px?

[Alibek Kulseitov]

Глеб Кемарский: Вот смотрите. Ширина моего сайта должна быть 1200px правильные ли запросы?
media (min-width: 480px) and (max-width: 767px) {
.container {
max-width: 748px;
outline: 1px solid yellow;
}
}

media (min-width: 768px) {
.container {
width: 750px;
outline: 1px solid green;
}
}
media (min-width: 992px){
.container {
width: 970px;
outline: 1px solid red;
}
}
media (min-width: 1200px){
.container {
width: 1170px;
outline: 1px solid blue;
}
}

[Глеб Кемарский]

1) Сейчас min-width возрастают лесенкой, и в каждом переопределяется один и тот же класс container. Поэтому в первом запросе max-width можно убрать, чтобы весь код был в одном стиле.
2) Для экранов от 0 до 479px ничего не указано. Каким на таких экранах должен быть container? Его описание нужно поместить первым, не заворачивая в медиа-запрос. Получится полноценный Mobile First.

[Alibek Kulseitov]

Глеб Кемарский: Вот смотрите мой финальный код) Все правильно? Или где-то ошибка?
media (min-width: 992px) and (max-width: 1200px){
.container {
width: 970px;
outline: 1px solid red;
}
}
media (min-width: 768px) and (max-width: 992px) {
.container {
width: 750px;
outline: 1px solid green;
}
}

media (min-width: 480px) and (max-width: 767px) {
.container {
width: 478px;
outline: 1px solid yellow;
}
}

media (min-width: 320px) and (max-width: 479px) {
.container {
min-width: 320px;
padding-left: 0;
padding-right: 0;
outline: 1px solid purple;
}
}

[Alibek Kulseitov]

Глеб Кемарский: Этот момент смущает что-то
media (min-width: 480px) and (max-width: 767px) {
.container {
width: 478px;
outline: 1px solid yellow;
}
}

[Глеб Кемарский]

Алибек Кулсеитов: Чем именно смущает?

[Глеб Кемарский]

Алибек Кулсеитов:
1) Забыли "@" перед "media".
2) Если в одном запросе (min-width: 992px), то в другом нужно не (max-width: 992px), а (max-width: 991px).
3) Вы почему-то боитесь определять интервал от нуля до первого перехода. Поэтому он и преподносит вам сюрпризы.