Под какие основыные размеры настраивать CSS @media screen?

Question

[trevoga_su]

Сабж. Смотрел разные исходники. Ничего не ясно.

У меня фикс. дизайн 960px в ширину по центру. Хочу адаптивный дизайн сделать.
Но какие именно размеры прописывать в media? По какому принципу они подбираются? Есть какая-то статистика по разрешениям мобильных приложений?

Смотрю сейчас чей-то исходник:

@media screen and (max-width: 650px) {
и 
@media screen and (max-width: 480px) {

почему именно эти размеры указал верстальщик?

Comments

[Максим Дунаевский]

Делайте как в Twitter Bootstrap. Уверен, эти ребята знают, какие сейчас тренды в размерах экрана и т.д. И вообще, может быть, Вам лучше взять готовый CSS-фреймворк, чем самому городить огород?

Answer 1

[Сергей]

Всегда использую эти( это старые брэйкпоинты bootstrap по умолчанию ):

/* Large desktops and laptops */
media (min-width: 1200px) {

}

/* Portrait tablets and medium desktops */
media (min-width: 992px) and (max-width: 1199px) {

}

/* Portrait tablets and small desktops */
media (min-width: 768px) and (max-width: 991px) {

}

/* Landscape phones and portrait tablets */
media (max-width: 767px) {

}

/* Landscape phones and smaller */
media (max-width: 480px) {

}

По надобности дописую промежуточные разрешения, если вдруг по дизайну что то падает на 650px, тогда дописую:

media (max-width: 650) {

}

Comments

[Uno di Palermo]

а как же высота?

[Nikita Kachaev]

я, как дурак, скопировал одну из строк и не мог понять почему не работает.
потому-что @media, а не просто media

Answer 2

[Crash]

Для себя обычно беру наиболее распространенные (desktop first):
1200px
992px
768px
480px
320px

Comments

[Олег ak-o]

Недавно верстал и попал в руки IPHONE 5s (300px) Советую взять на вооружение : )

[Crash]

Олег ak-o: окей)

[Влад]

Олег ak-o: только в нем 320px:)

[Олег ak-o]

Влад: Кажется что вы правы. Я пользовался window.innerWidth что обычно есть ширина окна самого браузера, и при width 320 вёрстка вываливалась за него.

[alex-1917]

Олег ak-o, 4s отлично себя чувствует при 320px. Поменьше читайте желтых газет и пореже юзайте window.innerWidth - или ваш проект будет зависеть от каждого чиха пользователя.

Answer 3

[Александр Юдаев]

я всегда смотрю на сайте какие медия более популярны.
по стандарту использую такую сетку:

1200 +
980 - 1199
769 - 979
640 - 768 (чтоб мелкие таблеты в portrait могли получить визуализацию эдентичную телефонам)
до 639 или 640 (зависит от проекта)
иногда добавляю 320 и 480

когда проект большой беру сетку бутстрапа и допиливаю

Answer 4

[GreatRash]

Погуглите самые популярные разрешения для разных устройств (мобильники, планшеты). И выберите для себя 2-3 стоп-точки, на которых вы будете менять стили. Вот и весь секрет.

Comments

[trevoga_su]

полагаете стоит равняться на подобные статистики?
www.w3counter.com/globalstats.php?year=2015&month=3

[Сергей delphinpro]

А непопулярные пусть идут лесом? :)

[GreatRash]

Сергей: Именно так.

[GreatRash]

trevoga_su: Почему нет?

[Сергей delphinpro]

GreatRash: Вот так сделаете сайт, а у заказчика как раз окажется устройство с непопулярным разрешением :)

[GreatRash]

Сергей: Ну и что? У него при этом ничего не развалится, просто растянется на 100% да и всё.

[Сергей delphinpro]

GreatRash: Может оказаться так, что именно один пиксель развалит вам верстку. Перечитайте мой ответ выше.

[GreatRash]

Ок, какие ваши предложения в связи с этим?

[Сергей delphinpro]

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

[Сергей delphinpro]

Сергей Сергеев: >не бъется никто за крохи!!
тут видимо вопрос в соотношении стоимости поддержки к стоимости выгоды.
тут все зависит от конкретного бизнеса.
Я лишь хотел сказать что если заказчику выгодно, то вам придется делать

Answer 5

[sinefighter]

В свое время тоже задавался таким вопросом, и решил взять за стандарты breakpoints у twitter bootstrap. В этой ссылке приведены breakpoints для различных устройств, их и можете взять bootstrap-ru.com/scaffolding.php#responsive
А вообще, когда начал верстать адаптивные макеты, понял, что лучше не равняться на конкретные breakpoints устройств, а писать их по мере необходимости (сжимаемости) сайта.

Answer 6

[Nikolay Talanov]

Многое зависит от типа вашего сайта. Если речь идет о каком-нибудь контентном сайте (новости/блог/что-то еще с разношерстной структурой) то тут не обойтись без нескольких мобильных диапазонов (мелкие мобильники, лопаты, планшеты). Если же речь идет о каком-нибудь простом лэндинге, где вся информация представлена "линейно" в вертикальном потоке, то без особых проблем можно взять за основу один брейкпоинт max-width: 921px и делать адаптив под него. + если вы хотите сделать не абы что, вам понадобится дизайнер, который вам нарисует хотя бы мокап мобильной версии.

Answer 7

[artur43211]

Большинство устройств попадают под 3 медиа:
media (min-width: 768px) and (max-width: 979px) {}
media (min-width: 481px) and (max-width: 767px) {}
media (max-width: 480px) {}

Answer 8

[Виталий]

Согласен с Сергеем (@dpr), привязываться к популярным разрешениям проблематично, так как понадобиться подгонять некоторые элементы. При разработке с нуля пользуюсь этим способом наоборот, так как разрабатываю по принципу "мобильные первые", но суть неизменна.

Comments

[hobnail]

Именно так и надо от мобильного к десктопу. Как говорится "советы лучших собаководов" :-)

[Senseich]

Виталий, хоть тема и старая, но я вот до сих пор не особо понимаю как делать адаптив через min-width ? Т.е. вы сразу верстаете для мобильного, а потом через медиазапросы делаете ПК версию, так чтоли?

Answer 9

[Issue]

Не понимаю в чем суть всех вышеуказанных брекпоинтов, достаточно трех:

@media (max-width: 425px) {
	/* MOBILE */
}
@media (min-width: 425px) and (max-width: 1024px){
	/* TABLET */
}
@media (min-width: 1024px) {
	/* DESKTOP */
}

Comments

[MRS 010]

От дизайна сайта зависит