Как обычно. Просто в CSS-файле указываете соответствующие параметры. При этом даже
нет надобности динамически менять класс блоков в зависимости от устройства, либо элементам устанавливать несколько классов "на все случаи жизни" (по-моему, это бред). В первый файл сохраните стили для мобильной версии (без
media), а во второй - стили для остальных устройств, используя код ниже.
Например, есть у вас на странице блок с классом
test.
/* Смартфоны (портретный и ландшафтный режимы) */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px) {
/* Здесь задаем стили для браузеров, чья минимальная ширина - 320px, максимальная - 480px. Далее - по аналогии. */
.test {
background: black;
}
}
/* Смартфоны (ландшафтный режим) */
@media only screen
and (min-width: 321px) {
.test {
background: red;
}
}
/* Смартфоны (портретный режим) */
@media only screen
and (max-width: 320px) {
.test {
background: blue;
}
}
/* Планшеты (портретный и ландшафтный режимы) */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px) {
.test {
background: yellow;
}
}
/* Планшеты (ландшафтный режим) */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape) {
.test {
background: grey;
}
}
/* Планшеты (портретный режим) */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait) {
.test {
background: green;
}
}
/* Ноутбуки и ПК */
@media only screen
and (min-width: 1224px) {
.test {
background: orange;
}
}
/* Большие дисплеи */
@media only screen
and (min-width: 1824px) {
.test {
background: pink;
}
}