Angel700
@Angel700
новичок в программирований!

Как сделать, чтобы при разных разрешениях менялся цвет?

Я хочу сделать чтобы уведомление меняло цвет при разных разрешениях.

Например:

синий - <576px
зеленый - 576-992px
желтый - 992-1200px
красный - >1200px

вот код :
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Tinyone</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
	<div class="container">
    	<div class="alert alert-primary col-xl-alert-danger" role="alert">
    		<strong>Well done!</strong> You successfully read this important alert message.
    	</div>
    </div>
</body>

Как это сделать?
  • Вопрос задан
  • 54 просмотра
Решения вопроса 1
megakor
@megakor
PHP погроммист
С помощью только лишь Bootstrap это не сделать. Пишем свой CSS:

@media (max-width: 575px) {
    .alert--test {
        background-color: var(--primary);
    }
}

@media (min-width: 576px) and (max-width: 991px) {
    .alert--test {
        background-color: var(--success);
    }
}

@media (min-width: 992px) and (max-width: 1999px) {
    .alert--test {
        background-color: var(--warning);
    }
}

@media (min-width: 1200px) {
    .alert--test {
        background-color: var(--danger);
    }
}


В вашем коде нужно убрать alert-primary col-xl-alert-danger и добавить уникальный класс, в моем случае это, например, alert--test.
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
HistoryART
@HistoryART
Молодой и дерзкий
Берёте бутстрап, удаляете его и забываете что он существует. А вам нужны media запросы.
Ответ написан
@P747
@media (max-width: 576px) {

	.col-xl-alert-danger {
		background: blue;
	}

}

@media (min-width: 1200px) {

	.col-xl-alert-danger {
		background: red;
	}

}

@media (min-width: 992px) and (min-width: 1200px) {

	.col-xl-alert-danger {
		background: yellow;
	}

}

@media (min-width: 576px) and (min-width: 992px) {

	.col-xl-alert-danger {
		background: green;
	}

}
Ответ написан
Ваш ответ на вопрос

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

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