Блог

Главная - Вопросы по программированию - @заполнение мультимедиа не работает

@заполнение мультимедиа не работает

#css #media #padding

#css #Медиафайлы #заполнение

Вопрос:

У меня возникли проблемы с @media и дополнением моей навигации. Когда я просто выполняю последнее @media, @media (min-width: 992px) оно работает нормально, но ничего не происходит, когда я добавляю другие аргументы. Вот что я делаю:

 @media (max-width: 767px) {
  #navigation ul li a { padding: 15px 20px; }
}
@media (min-width: 768px) and (max-width: 959px) {
  #navigation ul li a { padding: 15px 20px; }
}
@media (min-width: 960px) and (max-width: 991px) {
  #navigation ul li a { padding: 15px 30px; }
}
@media (min-width: 992px) {
  #navigation ul li a { padding: 15px 24px; }
}

Спасибо, что посмотрели

Комментарии:

1. Для начала используйте правильный синтаксис, например: @media screen and (max-width: 767px) { } . Посмотрите, поможет ли это.

2. Нет кубиков. Даже если я поставлю @media only screen and или просто @media screen and

3. @ralph.m: В данном синтаксисе нет ничего плохого или неправильного.

Ответ №1:

Этот код работает в моем Mac Chrome. Кроме того, вертикальное заполнение не работает с <a> элементами, но оно будет работать с <li> элементами.

 <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
        @media (max-width: 767px) {
            #navigation ul li a {
                color: red;
                padding: 0;
            }
        }

        @media (min-width: 768px) and (max-width: 959px) {
            #navigation ul li a {
                color: green;
                padding: 10px 5px;
            }
        }

        @media (min-width: 960px) and (max-width: 991px) {
            #navigation ul li a {
                color: yellow;
                padding: 20px 15px;
            }
        }

        @media (min-width: 992px) {
            #navigation ul li a {
                color: blue;
                padding: 30px 25px;
            }
        }
    </style>
    </head>
    <body>
        <div id="navigation">
            <ul>
                <li>
                    <a href="google.com">Google</a>
                </li>
            </ul>
        </div>
    </body>
</html>
Метки: