Конкретное разрешение для media

В большинстве случаев подходит такие варианты (от Bootstrap'a):

// Самые маленькие устройства (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }
// Маленькие устройства (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }
// Средние устройства (tablets, less than 992px)
@media (max-width: 991.98px) { ... }
// Большие устройства (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }

Или еще такой вариант (если нужен какой то один конкретный он подойдет больше):

// Самые маленькие устройства (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }
// Маленькие устройства (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767.98px) { ... }
// Средние устройства (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991.98px) { ... }
// Большие устройства (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199.98px) { ... }
// Самые большие устройства (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

В head добавьте:

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

На самом деле вариантов огромное количество, зависит от устройства, Можете найти его здесь