Но мне кажется, что это ерунда. Туда отдельно писать код для всей страницы снова?
На чистом CSS - да.
Чтобы скрасить монотонность копирования одного и того же, существуют препроцессоры css (LESS, SCSS, Stylus), и вместо дублирования под все медиа, Вы сразу пишите медиа запросы к конкретному классу, в последующем препроцессор сформирует нужное, и оно будет ожидаемо работать.
Например:
.sidebar {
width: 300px;
@media screen and (orientation: landscape) {
width: 500px;
}
@media screen and (min-width: 640px) {
width: 350px;
}
@media print {
display: none;
}
}
на выходе будет:
.sidebar {
width: 300px;
}
@media screen and (orientation: landscape) {
.sidebar {
width: 500px;
}
}
@media screen and (min-width: 640px) {
.sidebar {
width: 350px;
}
}
@media print {
.sidebar {
display: none;
}
}
Отладка меди-запросов включается в DevTools доп утилитах рендера:
Туть:
