Question

这是一个愚蠢的疑问，我用Google搜索，但无法解决问题。

尽管元标记正确，媒体查询仍无法正常工作，当我检查index.html时，看到以下几行是由于用户样式表导致的错误

  //in user stylesheet
 meta{
       display: none;
      }

//媒体查询：

 @media screen and(max-width: 1058px)
{

.navigation__list{
     width: 35%;
    } 
}
@media screen and(max-width: 768px) 
{

body{
    display: none;
    }
}

这是我的：

//Index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>    
    <nav class="navigation">
        <div class="navigation__logo">
            <h4>10X actions</h4>
        </div>
        <ul class="navigation__list">
            <li class="navigation__item"><a href="">Home</a></li>
            <li class="navigation__item"><a href="">About</a></li>
            <li class="navigation__item"><a href="">Contatc Us</a></li>
            <li class="navigation__item"><a href="">Enjoy</a></li>
        </ul>
        <div class="navigation__burger">
            <div class="navigation__burger--line">  
            </div>

            <div class="navigation__burger--line">
            </div>

            <div class="navigation__burger--line">    
            </div>
           </div>
    </nav>    
</body>
</html>

//style.css

*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

.navigation{
    display: flex;
    justify-content: space-around;
    align-items: center;
    min-height: 8vh;
    background-color: #5d4954;
} 
.navigation__list{
    display: flex;
    justify-content: space-around;
    width: 30%;
}
.navigation__item{
    list-style: none; 
}

//忽略以下几行忽略这些行，因为不允许我的问题

Answer 1

我不确定。但是，我认为我的媒体查询也不起作用，因此我在and和(之间留出了空格。因此，一旦尝试过这种方式，让我知道它是否有效：

// See space between
@media screen and (max-width: 1058px)
{
.navigation__list{
     width: 35%;
    } 
}

CSS媒体查询未显示任何效果

1 个答案: