Как сделать разный стиль для разных размеров экрана?
Есть возможность в CSS для разных размеров экрана задать разные стили:
@media (min-width: 768px) {
.my_div {
width: 750px;
}
}
min-width - минимальный размер экрана, при котором будет срабатывать этот стиль.
max-width - максимальный размер экрана, при котором будет срабатывать этот стиль.
Также можно использовать @media (min-width: 300px) and (max-width: 768px) - в этом случае можно задать диапазон размера экрана, при котором будет срабатывать нужный стиль.
Это очень полезно, если на маленьких экранах нужно сделать какие-то элементы поменьше или вовсе убрать с экрана.