@Denis_DM

Какие css media запросы прописать для мобильных устройств?

Какие самые оптимальные разрешения прописывать при использовании CSS запросов, чтобы сайт был оптимизирован под разные варианты экрана телефона.
Пожалуйста, только не надо писать, чтобы я гуглил. Я этим уже занимался и везде разные ответы, хотелось услышать ответ от людей, которые с этим работают=)
За ранее благодарю, за подробный ответ.
  • Вопрос задан
  • 3173 просмотра
Решения вопроса 2
@Lieroes
Советую не придумывать велосипед и обратиться к популярному фрейморвку Bootstrap :) он нам навязывает следующую сетку:

// Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }


Удачи ;)
Ответ написан
Mike_Ro
@Mike_Ro
$ run войтивайти
Я этим уже занимался и везде разные ответы

И здесь будут разные ответы...

После множества различных вариантов, остановился на следующем наборе:
// минимальная ширина сайта со всеми элементами
html, body {
	min-width: 320px;
}

// далее идут breakpoints
max-width: 480px - 1;
max-width: 576px - 1;
max-width: 768px - 1;
max-width: 992px - 1;
max-width: 1200px - 1;
min-width: 1200px;

// ширина основного контейнера
max-width: 100%; // простая
width: calc(100% - 2rem * 2); // с отступами
width: calc(100% / 12 * 12 - 2rem * 2); // с колонками и отступами

В исключительных случаях использую breakpoint более 1200px (1440, 1600, 1920), но очень редко...
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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