为什么我的 CSS 媒体查询会破坏样式？

Question

我正在尝试使我的侧边栏流畅，以便它可以随着浏览器窗口进行调整，并且一切似乎都运行良好，除了添加媒体查询后，我的 CSS 样式会中断，但是当我接受查询时离开它又回到了我的样式表中的规范样式。有人可以看看我的代码并告诉我我做错了什么吗？提前致谢！

顺便说一句，当我将第二个结尾大括号添加到#rightandoverview 媒体查询时，样式会恢复到应有的方式，但流动性不起作用。会是什么呢？

#righthandoverview {
position: absolute;
top: 91px;
right: 0px;
width: 20%;
height:215px;
background-color: white;
webkit-box-shadow: 0px 4px 5px -5px #777;
-moz-box-shadow: 0px 4px 5px -5px #777;
box-shadow: 0px 4px 5px -5px #777;
}

@media screen and (max-width:830px) and (min-width:100px) {
#righthandoverview {
    float: left;
    width: 30%;
    background-color: yellow;
    margin-top: 5px;

}





#righthandoverview ul {
position: absolute;
display: inline;
float: left;
font-family: klavika-light;
list-style-type: none;
text-decoration: none;
white-space: nowrap;
}

@media screen and (max-width:830px) and (min-width:100px) {
#righthandoverview ul {
    float:left;
    width:30%;
    background-color: yellow;
    margin-top: 10px;

}
}




#righthandoverview ul li > a {
display: inline;
text-decoration: none;
color:#8BAFDA;
}   

#righthandoverview ul li {
padding-bottom: 6px;
}

Answer 1

看起来您缺少一个括号来结束您的第一个媒体查询

@media screen and (max-width:830px) and (min-width:100px) {
#righthandoverview {
    float: left;
    width: 30%;
    background-color: yellow;
    margin-top: 5px;

}





#righthandoverview ul {
position: absolute;
display: inline;
float: left;
font-family: klavika-light;
list-style-type: none;
text-decoration: none;
white-space: nowrap;
}
}

Answer 2

您错过了以下代码中的括号，我已添加它。

 @media screen and (max-width:830px) and (min-width:100px) {
        #righthandoverview {
            float: left;
            width: 30%;
            background-color: yellow;
            margin-top: 5px;

        }
    }