Я использую их таким образом, смотрю на дизайн, например после десктопного макета на 1920px идет макет на 1366px, значит я выставляю разрешение в DevTools на 1366 px и пишу стили в @media screen and (max-width: 1400px), далее например идет макет на 1024px, значит я выставляю разрешение на 1024px и пишу стили в @media screen and (max-width: 1200px) и так далее
Пример кода@media screen and (max-width: 1400px) {
    
}
@media screen and (max-width: 1200px) {
    
}
@media screen and (max-width: 992px) {
    
}
@media screen and (max-width: 768px) {
    
}
@media screen and (max-width: 576px) {
    
}
@media screen and (max-width: 375px) {
    
}