Html css媒体查询没有显示任何效果_Html_Css_Media Queries

Html css媒体查询没有显示任何效果

html css

Html css媒体查询没有显示任何效果,html,css,media-queries,Html,Css,Media Queries,这是一个愚蠢的疑问，我在谷歌上搜索了一下，但无法解决这个问题尽管有正确的元标记，但媒体查询仍无法工作。当我检查index.html时，我看到下面几行，这是由于用户样式表导致的错误 //in user stylesheet meta{ display: none; } //媒体查询： @media screen and(max-width: 1058px) { .navigation__list{ width: 35%; } } @med

这是一个愚蠢的疑问，我在谷歌上搜索了一下，但无法解决这个问题

尽管有正确的元标记，但媒体查询仍无法工作。当我检查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; 
}

//忽略下面几行

忽略这些行，因为我的问题不被允许

我不确定。但是，我认为我的媒体查询也不起作用，于是我在和之间留出了空间。所以，尝试一下这种方法，让我知道它是否有效：

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