#html #css #laravel-5
#HTML #css #laravel-5
Вопрос:
Я пытаюсь установить медиа-запросы в своем классе нижнего колонтитула, но по какой-то причине он не работает.
Я запускаю сервер с Laravel 5, но не уверен, что это является причиной этого.
Вот коды:
HTML и CSS
.footer{
background-color:rgba(40, 50, 60, 1);
height: 200px;
}
/* MEDIA QUERIES */
/* if screen width goes above 450px do this */
@media only screen and(min-width: 450px)
{
/* make the color red */
.footer{
background-color: red!important;
}
} <div class="footer d-flex justify-content-center">
<span class="font-md text-light">Footer</span>
</div> Комментарии:
1. Ваша проблема решена?
2. Да, это решено благодаря вам. В следующий раз я добавлю пробел между «и» и «(минимальная ширина: 450 пикселей)»
Ответ №1:
Просто добавьте пробел между and и тому ( подобное and (min-width: 450px) .
Если вы не установите пробел, он не установит никакого кода, поскольку это будет неправильная грамматика.
ДЕМОНСТРАЦИЯ
.footer{
background-color:rgba(40, 50, 60, 1);
height: 200px;
}
/* MEDIA QUERIES */
/* if screen width goes above 450px do this */
@media only screen and (min-width: 450px)
{
/* make the color red */
.footer{
background-color: red !important;
}
} <div class="footer d-flex justify-content-center">
<span class="font-md text-light">Footer</span>
</div> Комментарии:
1. Спасибо, мистер Максиги. Вы помогли мне решить проблему. Именно «‘и (min-width:» вызвали проблему. Большое вам спасибо
Ответ №2:
Добавьте это в свой HTML <head> -элемент:
<meta name="viewport" content="width=device-width, initial-scale=1">
И ваши медиа-запросы должны выглядеть так (а не «только экран и«).
@media only screen and (max-width: 577px) {
/* Your responsive classes */
}
@media only screen and (min-width: 578px) and (max-width: 767px) {
/* Your responsive classes */
}
@media only screen and (min-width: 768px) {
/* Your responsive classes */
}
Ответ №3:
@media (min-width: 450px) {
/* make the color red */
.footer{
background-color: red !important;
}
}
используя этот код, вы получите результат.
Комментарии:
1. Ответы, в которых просто говорится «используйте это», не помогают информировать спрашивающего о том, что они делают неправильно. Что делает ваш код для устранения проблемы? Почему работает исключение ограничения экрана? Что, если пользователь также хочет настроить целевой экран?