Как с «переключать» CSS-классы с помощью media queries?

Question

[zugo]

Как можно сделать так, чтобы при определенной ширине экрана элемент использовал правила из одного из своих классов, а при другой - из другого?
(Пример: в Bootstrap, например, есть классы ширины колонок - col-xs, col-md, и т.д., при изменении размера экрана элементы используют класс с префиксом, соответствующим размеру - xs для телефонов, sm для планшетов и т.д.)

Answer 1

[Александр Зачиналов]

взгляните на grid.less в поставке bootstrap, сразу все поймете. Если не хотите заморачиваться, то проще всего применять один класс и описывать разные свойства для каждого media query

Comments

[Александр Зачиналов]

если взяли grid.less для себя, то стоит помнить, что там используются переменные, которые раскрыты, по-моему, в variables.less. Иначе у вас ничего не заработает.

[zugo]

Да нет, написал свое кривое решение (с рекурсивной генерацией колонок через LESS). Вроде бы, работает нормально.

Answer 2

[chupok]

Как обычно. Просто в 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;
}
}

Comments

[zugo]

Просто я писал свой велосипед, аналог бутстрапа. Хотелось сделать, как там.