@zugo

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

Как можно сделать так, чтобы при определенной ширине экрана элемент использовал правила из одного из своих классов, а при другой - из другого?
(Пример: в Bootstrap, например, есть классы ширины колонок - col-xs, col-md, и т.д., при изменении размера экрана элементы используют класс с префиксом, соответствующим размеру - xs для телефонов, sm для планшетов и т.д.)
  • Вопрос задан
  • 5219 просмотров
Решения вопроса 1
взгляните на grid.less в поставке bootstrap, сразу все поймете. Если не хотите заморачиваться, то проще всего применять один класс и описывать разные свойства для каждого media query
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@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;
}
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы