Как сделать - контрольные точки
Узнайте, как использовать мультимедийные запросы для общих контрольных точек устройства.
Типичные контрольные точки устройства
Есть тонны экранов и устройств с различной высотой и шириной, поэтому трудно создать точную точку остановки для каждого устройства. Для простоты можно ориентироваться на пять общих групп:
Пример
/*
Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px)
{...}
/* Small devices (portrait tablets and large phones, 600px and up)
*/
@media only screen and (min-width: 600px) {...}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}
/* Large devices (laptops/desktops, 992px and up)
*/
@media only screen and (min-width: 992px) {...}
/* Extra large devices (large
laptops and desktops,
1200px and up) */
@media only screen and (min-width: 1200px) {...}
Похожие страницы
CSS Учебник: CSS Media запросы
CSS Учебник: CSS Media запросы примеры
Ссылка на CSS: правило @media
RWD Учебник: отзывчивый веб-дизайн с медиа-запросов
Учебник по JavaScript: метод Window.matchmedia()