Помощь Оптимальный размер контейнера

Тема в разделе "Opencart", создана пользователем ioh, 23 авг 2015.

Информация :
Внимание форумчане! При создании тем, или выкладывании какой-либо информации проверьте в какой ветке форума вы находитесь! Не путайте Opencart и Opencart2. При несоблюдении данного условия выносится соответствующее наказание! И потом не говорите что вас НЕ ПРЕДУПРЕЖДАЛИ! По возможности используйте обменники mail, yandex, google, dropbox, rghost Дабы избежать просьб перезалить и проблем с рекламой!
Модераторы: ZiX
  1. ioh

    ioh

    Регистр.:
    24 сен 2013
    Сообщения:
    181
    Симпатии:
    4
    Дамы и господа! Поделитесь опытом: какой нынче наиболее распространенный и лучше всего отображаемый размер контейнера? Пока соберусь сделать мобильную версию, хотелось бы, чтобы на разных разрешениях экранов хорошо смотрелся сайт.
     
  2. inturned

    inturned Webmaster & Designer

    Регистр.:
    7 ноя 2011
    Сообщения:
    537
    Симпатии:
    257
    Так не понятно?! если ты делаешь мобильную версию то:
    от 0 до 400, от 400 до 768, от 768 до (960/980) - это мобильная.

    Соответственно для десктопов: 2 контейнера как минимум:
    1. 960/980 пикс - не забываем что у большинства еще есть нетбуки 10 дюймов, а у кого-то пк с 15" мониторы (да, да, квадраты, они еще есть)
    2. 1200 пикс - как раз под ноутбуки 15.6" - в среднем 1300/1366 пикс в ширине, ну и для FullHd тоже нормально, дальше уже можно и не делать... хотя...
     
    ioh нравится это.
  3. ioh

    ioh

    Регистр.:
    24 сен 2013
    Сообщения:
    181
    Симпатии:
    4
    Так вот я и спросила про оптимальную именно потому, что нет возможности сейчас делать несколько разных. Просто столкнулась с тем, что поехал сайт на планшете 10.1 с новым андроидом. До этого все прилично отображалось.
     
  4. inturned

    inturned Webmaster & Designer

    Регистр.:
    7 ноя 2011
    Сообщения:
    537
    Симпатии:
    257
    Сделайте оптимально 960 или 980, они как по умолчанию, дальше через медиа запросы

    Код:
    @media screen and (min-width: 1200px) {
    ... Это будет для монитор с разрешением более 1200px
    }
    
    Ну и дальше уже уменьшаем под мобильные.
    Увы, сразу сделать, чтобы было под все разрешения не получиться
     
  5. ioh

    ioh

    Регистр.:
    24 сен 2013
    Сообщения:
    181
    Симпатии:
    4
    Не почтите за наглость :) Но эти запросы делаются в отдельном файле стилей, или в общем?
     
  6. inturned

    inturned Webmaster & Designer

    Регистр.:
    7 ноя 2011
    Сообщения:
    537
    Симпатии:
    257
    Эм, это уже как Вам удобно будет. Хотите пишите в основном, для удобства можете писать в самом конце.
    Если будете писать в отдельном, то не забудьте его подключить к сайту, если про опенкарт говорить, то это header.tpl

    Ну пишите его например так:
    Код:
    @media screen and (min-width: 1200px) {
      .container {
        width: 1200px;
      }
    }
    Я считаю, что правильней будет прочитать http://htmlbook.ru/css/value/media
    Также на хабре есть пару статей, да и вообще во всем интернете
     
    ioh нравится это.
  7. ioh

    ioh

    Регистр.:
    24 сен 2013
    Сообщения:
    181
    Симпатии:
    4
    Очень помогли. Благодарю. Буду читать ))
     
  8. inturned

    inturned Webmaster & Designer

    Регистр.:
    7 ноя 2011
    Сообщения:
    537
    Симпатии:
    257
    Не за что. На самом деле, если знакомы с версткой, то и с медиа запросами никаких сложностей возникнуть не должно. Медиа-запрос в нем привычное правило стилей, только не забывайте закрывать сами медиа-запросы {...} и все получится. А тестировать их можно хоть в хроме, там пиктограмма в инспекторе есть в виде мобильника.
    Успехов
     
    ioh нравится это.
  9. ioh

    ioh

    Регистр.:
    24 сен 2013
    Сообщения:
    181
    Симпатии:
    4
    А вот еще вопрос возник: у меня использован viewport. Как он сочетается с медиа-запросами?

    Что-то не срабатывают у меня эти правила. Кто знает, в чем может быть причина?
     
    Последнее редактирование модератором: 13 ноя 2015
  10. avgccp

    avgccp Постоялец

    Регистр.:
    2 май 2014
    Сообщения:
    99
    Симпатии:
    8
    ion, на сколько я помню Ваш проект, вам проще использовать масштабирование основного контейнера (не пинайте сильно, это не очень профессионально, но просто, легко и работает)