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

[ioh]

Дамы и господа! Поделитесь опытом: какой нынче наиболее распространенный и лучше всего отображаемый размер контейнера? Пока соберусь сделать мобильную версию, хотелось бы, чтобы на разных разрешениях экранов хорошо смотрелся сайт.

 

[inturned]

Дамы и господа! Поделитесь опытом: какой нынче наиболее распространенный и лучше всего отображаемый размер контейнера? Пока соберусь сделать мобильную версию, хотелось бы, чтобы на разных разрешениях экранов хорошо смотрелся сайт.

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

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

 

[ioh]

Так вот я и спросила про оптимальную именно потому, что нет возможности сейчас делать несколько разных. Просто столкнулась с тем, что поехал сайт на планшете 10.1 с новым андроидом. До этого все прилично отображалось.

 

[inturned]

Так вот я и спросила про оптимальную именно потому, что нет возможности сейчас делать несколько разных. Просто столкнулась с тем, что поехал сайт на планшете 10.1 с новым андроидом. До этого все прилично отображалось.

Сделайте оптимально 960 или 980, они как по умолчанию, дальше через медиа запросы

@media screen and (min-width: 1200px) {
... Это будет для монитор с разрешением более 1200px
}

Ну и дальше уже уменьшаем под мобильные.
Увы, сразу сделать, чтобы было под все разрешения не получиться

 

[ioh]

Сделайте оптимально 960 или 980, они как по умолчанию, дальше через медиа запросы

@media screen and (min-width: 1200px) {
... Это будет для монитор с разрешением более 1200px
}

Ну и дальше уже уменьшаем под мобильные.
Увы, сразу сделать, чтобы было под все разрешения не получиться

Не почтите за наглость Но эти запросы делаются в отдельном файле стилей, или в общем?

 

[inturned]

Не почтите за наглость Но эти запросы делаются в отдельном файле стилей, или в общем?

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

Ну пишите его например так:

@media screen and (min-width: 1200px) {
  .container {
    width: 1200px;
  }
}

Я считаю, что правильней будет прочитать Для просмотра ссылки Войди или Зарегистрируйся
Также на хабре есть пару статей, да и вообще во всем интернете

 

[ioh]

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

Ну пишите его например так:

@media screen and (min-width: 1200px) {
  .container {
    width: 1200px;
  }
}

Я считаю, что правильней будет прочитать Для просмотра ссылки Войди или Зарегистрируйся
Также на хабре есть пару статей, да и вообще во всем интернете

Очень помогли. Благодарю. Буду читать ))

 

[inturned]

Не за что. На самом деле, если знакомы с версткой, то и с медиа запросами никаких сложностей возникнуть не должно. Медиа-запрос в нем привычное правило стилей, только не забывайте закрывать сами медиа-запросы {...} и все получится. А тестировать их можно хоть в хроме, там пиктограмма в инспекторе есть в виде мобильника.
Успехов

 

[ioh]

А вот еще вопрос возник: у меня использован viewport. Как он сочетается с медиа-запросами?

Что-то не срабатывают у меня эти правила. Кто знает, в чем может быть причина?

 

[avgccp]

ion, на сколько я помню Ваш проект, вам проще использовать масштабирование основного контейнера (не пинайте сильно, это не очень профессионально, но просто, легко и работает)