Вопрос по сетке адаптива @media на сколько уменьшать контейнер?

Question

[vei66]

Здравствуйте, недавно начал изучать адаптивную верстку. Допустим ширина ограниченного контейнера 1200px ну с учетом падинга 1230

__container{
max-width:1230px
margin: 0 auto;
padding:0 15px}

есть три media запроса
1-по ширине ограничивающего контейнера
2-для планшета 992px
3-для мобилки 768px

Собственно сам вопрос. На сколько нужно уменьшать сам ограничивающий контейнер? если изначально он 1230px то каким он должен быть когда будет второй медиа запрос на планшете 992px? т.е когда буду верстать под планшет и под мобилку на сколько px уменьшать нужно ограничивающий контейнер?

@media(max-width: 992px){
__container{
max-width ???}
}

ну и на мобильном устройстве

@media(max-width: 768px){
__container{
max-width ???}

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

Comments

[VoidVolker]

vei66 Правила 3.8

[vei66]

VoidVolker, исправил

[Ankhena]

vei66,

я стараюсь делать абсолютно всё резиновым и использовать rem и не использую bootstrap

Вроде бы ваша табличка дала ответ на мой вопрос))) если планшет >992 то контейнер уменьшаю до 960 если телефон <768 то контейнер делаю 720 если маленький телефон то 540 !

Эти фразы противоречат друг другу.
Если резина, то это отступы, а не ширина.
Т.е. ширина тоже, но типа от 280 до 1880 или как там по макету выходит хорошо.

[vei66]

Ankhena, вы не так поняли меня и я немного не так выразился или понял. Я понимаю что можно по брейкпоинтам а можно и без них,просто в данном случае мне предложили отказаться делать max-width а делать фиксированно width назвав это "резиной" что в противном случае остальное тоже придется делать "резиной" лишь к этому я так выразился. В макете бывает нету данных по адаптиву и идет "импровизация" поэтому мне и стало интересно на сколько нужно если нужно"правильно" уменьшать контейнер под каждый из устройств

[Ankhena]

vei66, нужно оставить красивые отступы, чтобы контентнпя часть не прилипала к краям окна. Сколько это - зависит от макета, размера шрифта, элементов и общей гармоничности.
Пробуйте, смотрите, давайте смотреть другим.

[imko]

А зачем его уменьшать?
У тебя есть требование макетачтобы контейнер был на экранах меньше компа какой то ширины определенной? Тогда бери ее с макета. Если нету то тогда и не уменьшай.
Контейнеру не нужно чтобы его уменьшали, тебе не нужно его уменьшать. кому нужно будет тот сам скажет на сколько)

Answer 1

[Lara B]

Контейнер - это технический див, который выполняет 3 задачи:
1 Ограничивает контент по ширине
2 Выстраивает его по центру
3 Не дает контенту касаться краев экрана на моб версиях
Предлагаю не делать его резиновым, прописывая max-width , предлагаю делать его фиксированной ширины. Это позволит избежать проблем, если вы вкладываете блок с карточками в контейнер. Иначе ширину карточек тоже придется делать резиновой
Если в вашем макете дизайнер не задал свои значения для контейнера, то можно воспользоваться значениями, которые задает фреймворк bootstrap

Comments

[vei66]

я стараюсь делать абсолютно всё резиновым и использовать rem и не использую bootstrap

Вроде бы ваша табличка дала ответ на мой вопрос))) если планшет >992 то контейнер уменьшаю до 960 если телефон <768 то контейнер делаю 720 если маленький телефон то 540 !

можно пожалуйста ссылку где можно почитать об этом??

[Lara B]

vei66, поищите на ютубе видео Юрия Ключевского, я научилась круто верстать после его уроков