Question

我遇到了@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; }
}

感谢您一看

Answer 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>

@media padding无法正常工作

1 个答案: