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

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

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

Смотрю сейчас чей-то исходник:
@media screen and (max-width: 650px) {
и 
@media screen and (max-width: 480px) {

почему именно эти размеры указал верстальщик?
  • Вопрос задан
  • 89351 просмотр
Пригласить эксперта
Ответы на вопрос 9
hector2009
@hector2009
Frontend Developer
Всегда использую эти( это старые брэйкпоинты 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) {

}
Ответ написан
Bandicoot
@Bandicoot
Вась-программист
Для себя обычно беру наиболее распространенные (desktop first):
1200px
992px
768px
480px
320px
Ответ написан
@Alex_mc
Веселый препод :)
я всегда смотрю на сайте какие медия более популярны.
по стандарту использую такую сетку:

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

когда проект большой беру сетку бутстрапа и допиливаю
Ответ написан
Комментировать
@GreatRash
Погуглите самые популярные разрешения для разных устройств (мобильники, планшеты). И выберите для себя 2-3 стоп-точки, на которых вы будете менять стили. Вот и весь секрет.
Ответ написан
@sinefighter
В свое время тоже задавался таким вопросом, и решил взять за стандарты breakpoints у twitter bootstrap. В этой ссылке приведены breakpoints для различных устройств, их и можете взять bootstrap-ru.com/scaffolding.php#responsive
А вообще, когда начал верстать адаптивные макеты, понял, что лучше не равняться на конкретные breakpoints устройств, а писать их по мере необходимости (сжимаемости) сайта.
Ответ написан
Комментировать
Ronnie_Gardocki
@Ronnie_Gardocki
Я у мамы фронтендщик.
Многое зависит от типа вашего сайта. Если речь идет о каком-нибудь контентном сайте (новости/блог/что-то еще с разношерстной структурой) то тут не обойтись без нескольких мобильных диапазонов (мелкие мобильники, лопаты, планшеты). Если же речь идет о каком-нибудь простом лэндинге, где вся информация представлена "линейно" в вертикальном потоке, то без особых проблем можно взять за основу один брейкпоинт max-width: 921px и делать адаптив под него. + если вы хотите сделать не абы что, вам понадобится дизайнер, который вам нарисует хотя бы мокап мобильной версии.
Ответ написан
Комментировать
@artur43211
Большинство устройств попадают под 3 медиа:
media (min-width: 768px) and (max-width: 979px) {}
media (min-width: 481px) and (max-width: 767px) {}
media (max-width: 480px) {}
Ответ написан
Комментировать
Tratatuy
@Tratatuy
Люблю задавать вопросы
Согласен с Сергеем (@dpr), привязываться к популярным разрешениям проблематично, так как понадобиться подгонять некоторые элементы. При разработке с нуля пользуюсь этим способом наоборот, так как разрабатываю по принципу "мобильные первые", но суть неизменна.
Ответ написан
paulenot
@paulenot
IT Issue
Не понимаю в чем суть всех вышеуказанных брекпоинтов, достаточно трех:
@media (max-width: 425px) {
	/* MOBILE */
}
@media (min-width: 425px) and (max-width: 1024px){
	/* TABLET */
}
@media (min-width: 1024px) {
	/* DESKTOP */
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы