AlibekKulseitov
@AlibekKulseitov
Люблю верстать и писать музыку

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

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

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

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

А как правильно позиционировать элементы на медиа запросах бустрапа не используя его сетку а именно такие как col-md-2 и тд.
  • Вопрос задан
  • 1265 просмотров
Решения вопроса 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
На Тостере много разговоров об этом.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Похожие вопросы