Как сделать - Типичные точки прерывания
Узнать, как использовать медиа запросы для общих точек прерывания устройства с помощью медиа запросов.
Типичные точки прерывания
Есть тонны экранов и устройств с разной высотой и шириной, поэтому трудно создать точную точку прерывания для каждого устройства. Чтобы все было просто, вы можете выбрать пять общих групп:
Пример
/* Очень маленькие устройства (телефоны, 600px и вниз) */
@media only screen and (max-width: 600px) {...}
/* Небольшие устройства (портретные планшеты и большие телефоны, 600px и выше) */
@media only screen and (min-width: 600px) {...}
/* Средние устройства (альбомные планшеты, 768 пикселей и выше) */
@media only screen and (min-width: 768px) {...}
/* Большие устройства (ноутбуки / настольные компьютеры, 992px и выше) */
@media only screen and (min-width: 992px) {...}
/* Очень большие устройства (большие ноутбуки и настольные компьютеры, 1200px и выше) */
@media only screen and (min-width: 1200px) {...} Редактор кода »Связанные страницы
CSS Учебник: CSS Медиа запросы
CSS Учебник: CSS Медиа запросы примеры
CSS Справочник: Правило @media
RWD Учебник: Адаптивный веб дизайн с медиа запросами
JavaScript Учебник: The window.matchMedia() method
