0

Верстаю сейчас сайт, в макете контейнер в ширину целых 1560 пикселей, но нужно, чтобы сайт помещался в экраны меньшего разрешения, пропорционально сужаясь, без появления горизонтального скрола. Так же есть мобильная версия при ширине экрана меньше 500, ширина контейнера 400 пикселей. Вот сам сайт.

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

До этого приходилось верстать просто статические сайты и все работало как надо. В чем может быть причина? Возможно ли вообще такое реализовать?

1
  • 1
    media для css .
    – user218976
    30 авг 2018 в 13:49

2 ответа 2

0

Используете медиа-запросы. Советую использовать Grid (Адаптивная сетка). Ссылка: тык. Рекомендую изучить следующую статью. Ниже приведен пример медиа запросов

  // Ландшафтный экран телефоны
  @media (max-width: 480px) { ... }
 
  // От ландшафтного экрана телефона до потретного планшета
  @media (max-width: 767px) { ... }
 
  // От портретного планшета до ландшафтного экрана и настольных дисплеев
  @media (min-width: 768px) and (max-width: 979px) { ... }
 
  // Большой дисплей
  @media (min-width: 1200px) { ... }

0

Правильно надо верстать, не забывая про простейшее сравнение чисел.

Вот ваш стиль:

@media only screen and (max-width: 1250px)
.content-wrapper {
  min-width: 1100px;
  padding: 0;
}

Как по-вашему, какова будет ширина контента при ширине окна, скажем, 800px? Отож. Оттуда и горизонтальный скроллинг.

Если в стилях min-width какого-нибудь элемента БОЛЬШЕ, чем min-width, заданный в media query (а в данном случае это 0 пикселей), то при размере экрана меньшем, чем min-width этого элемента, скроллинг появится стопроцентно.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.