Вопрос по сетке адаптива @media на сколько уменьшать контейнер?
Здравствуйте, недавно начал изучать адаптивную верстку. Допустим ширина ограниченного контейнера 1200px ну с учетом падинга 1230
__container{ max-width:1230px margin: 0 auto; padding:0 15px} |
__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: 992px){ __container{ max-width ???} }
ну и на мобильном устройстве
@media(max-width: 768px){ __container{ max-width ???} |
@media(max-width: 768px){ __container{ max-width ???}
на сколько ограничивающий контейнер должен быть меньше? Что-то смотрел на ютубе многих блогеров и этот момент никак не оговаривается
Дополнительно:
vei66 Правила 3.8
я стараюсь делать абсолютно всё резиновым и использовать rem и не использую bootstrap
Вроде бы ваша табличка дала ответ на мой вопрос))) если планшет >992 то контейнер уменьшаю до 960 если телефон <768 то контейнер делаю 720 если маленький телефон то 540 !
Эти фразы противоречат друг другу.
Если резина, то это отступы, а не ширина.
Т.е. ширина тоже, но типа от 280 до 1880 или как там по макету выходит хорошо.
Пробуйте, смотрите, давайте смотреть другим.
У тебя есть требование макетачтобы контейнер был на экранах меньше компа какой то ширины определенной? Тогда бери ее с макета. Если нету то тогда и не уменьшай.
Контейнеру не нужно чтобы его уменьшали, тебе не нужно его уменьшать. кому нужно будет тот сам скажет на сколько)
Контейнер - это технический див, который выполняет 3 задачи:
1 Ограничивает контент по ширине
2 Выстраивает его по центру
3 Не дает контенту касаться краев экрана на моб версиях
Предлагаю не делать его резиновым, прописывая max-width , предлагаю делать его фиксированной ширины. Это позволит избежать проблем, если вы вкладываете блок с карточками в контейнер. Иначе ширину карточек тоже придется делать резиновой
Если в вашем макете дизайнер не задал свои значения для контейнера, то можно воспользоваться значениями, которые задает фреймворк bootstrap
- я стараюсь делать абсолютно всё резиновым и использовать rem и не использую bootstrap
Вроде бы ваша табличка дала ответ на мой вопрос))) если планшет >992 то контейнер уменьшаю до 960 если телефон <768 то контейнер делаю 720 если маленький телефон то 540 !
можно пожалуйста ссылку где можно почитать об этом??
- vei66, поищите на ютубе видео Юрия Ключевского, я научилась круто верстать после его уроков
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для определения того, на сколько уменьшать контейнер при использовании медиа-запросов в CSS, необходимо учитывать различные факторы, такие как размер экрана устройства, дизайн вашего сайта, тип контента и т. д.
Одним из распространенных подходов является использование относительных единиц измерения, таких как проценты или em, для определения ширины контейнера в зависимости от размера экрана. Например, вы можете задать ширину контейнера в процентах и использовать медиа-запросы для изменения этого значения в зависимости от ширины экрана.
Например, если у вас есть контейнер с классом ".container", вы можете задать его ширину в процентах:
.container { width: 90%; margin: 0 auto; /* Центрируем контейнер */ }
Затем вы можете использовать медиа-запросы для изменения ширины контейнера на более маленьком экране, например, на мобильных устройствах:
@media only screen and (max-width: 600px) { .container { width: 100%; /* Изменяем ширину контейнера на 100% на маленьких экранах */ } }
Таким образом, вы можете настроить вашу сетку адаптивно, чтобы контейнер подстраивался под различные размеры экранов устройств. Помните, что оптимальный размер контейнера зависит от конкретного дизайна вашего сайта, поэтому рекомендуется тестировать его на различных устройствах, чтобы убедиться, что контент отображается корректно на всех экранах.