Для корректной работы медиа запросов требуется прописать мета тег viewport  в теге head вашей страницы

<meta name="viewport" content="width=device-width, initial-scale=1">

Медиа запросы по ширине и высоте экрана

Медиа запросы — это правила CSS, которые применяются к HTML разметке страницы в зависимости от разрешения экрана устройства, на котором она открыта.

/*пример сетки Bootstrap*/
@media screen and (max-width: 575px) {
	/*xs - для ширины экрана не более 575px включительно*/
}
@media screen and (min-width: 576px) and (max-width: 767px){
	/*sm - для ширины экрана от 576px до 767px включительно*/
}
@media screen and (min-width: 768px) and (max-width: 991px){
	/*md - для ширины экрана от 768px до 991px включительно*/
}
@media screen and (min-width: 992px) and (max-width: 1199px){
	/*lg - для ширины экрана от 992px до 1199px включительно*/
}
@media screen and (min-width: 1200px) {
	/*xl - для ширины экрана более 1200px включительно*/
}

Аналогично медиа запросам создаваемым по ширине экрана можно делать по высоте. Например:

@media (min-height: 720px) { 
  /* Стили CSS */ 
}
/*для высоты экрана от 720px включительно*/

К содержанию ↑

Медиа запрос по ориентации экрана

orientation — функция, которая проверяет то, в каком режиме (portrait или landscape) отображается страница.

/* landscape - альбомная ориентация (ширина > высоты) */
@media (orientation: landscape) { 
  /* Стили CSS */
}
/* portrait - книжная ориентация (высота > ширины) */
@media (orientation: portrait) { 
  /* Стили CSS */
}  

Медиа запрос на подключение файла CSS

Подключить файл CSS в зависимости от разрешения экрана устройства можно следующим образом:

<link rel="stylesheet" media="screen and (max-width: 480px)" href="styles-mobile.css">

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

Стилизация с помощью JavaScript в зависимости от размера экрана

if (window.matchMedia('screen and (max-width: 575px)').matches) {
  // CSS стили если соответствует медиа запросу по ширине до 575px
} 
else if(window.matchMedia('screen and (min-width: 576px) and (max-width: 767px)').matches) {
  // CSS стили если соответствует медиа запросу по ширине от 576px до 767px
}
else {
  // CSS стили если не соответствует медиа запросам выше
}