Как сделать разный стиль для разных размеров экрана?

Есть возможность в CSS для разных размеров экрана задать разные стили:

@media (min-width: 768px) {
    .my_div {
        width: 750px;
    }
}

min-width - минимальный размер экрана, при котором будет срабатывать этот стиль.

max-width - максимальный размер экрана, при котором будет срабатывать этот стиль.

Также можно использовать @media (min-width: 300px) and (max-width: 768px) - в этом случае можно задать диапазон размера экрана, при котором будет срабатывать нужный стиль.

Это очень полезно, если на маленьких экранах нужно сделать какие-то элементы поменьше или вовсе убрать с экрана.