Media Queries

Использование min-width

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

Использование max-width

@media (max-width: 575.98px) { ... }

// Small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }

// Medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { ... }

// Large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }

В основном смотрел на устройства Apple. Хотя устройства на базе Android также важны, в большинстве телефонов они отличаются друг от друга. Я надеюсь, что это не имеет большого значения для вас.

Источник

или:

.container {
    margin: 0 auto;
    background: #f2f2f2;
    box-sizing: border-box;
}
/* Mobile phones (portrait and landscape) ---------- */
@media screen and (max-width: 767px){
    .container {
        width: 100%;
        padding: 0 10px;
    }
}
/* Tablets and iPads (portrait and landscape) ---------- */
@media screen and (min-width: 768px) and (max-width: 1023px){
    .container {
        width: 750px;
        padding: 0 10px;
    }
}
/* Low resolution desktops and laptops ---------- */
@media screen and (min-width: 1024px) {
    .container {
        width: 980px;
        padding: 0 15px;
    }
}
/* High resolution desktops and laptops ---------- */
@media screen and (min-width: 1280px) {
    .container {
        width: 1200px;
        padding: 0 20px;
    }
}

Источник