Html 响应网格系统中的CSS定位

我正在学习如何制作响应性强的网站。我下载了Responsive Grid System，并正在学习该系统的响应能力（您将在屏幕截图上看到我在

html

中的内容）

现在我在定位方面遇到了一些问题。我使用

媒体查询

。对于从

320px

到

480px

的移动视图，我没有问题，但是当我想使

logo

集中在

480px

到

768px

的范围内时，我对

col span_6_of_12

有问题（你也可以在屏幕截图上看到）。我在一个

col span_6_of u 12

中有

logo

，然后在第二个

col span_6_of u 12

中有菜单。当我想使

徽标

居中时，此菜单

col span_6_of_12

仍然存在，我无法使此

徽标

居中（希望您理解我）

-这是我在网站上的HTML和Chrome视图截图

下面是CSS代码：

html {
background-color: #FFF;
}
body {
width: 100%;
margin: 0 auto;
}
img {
width: 100%;
}
a {
text-decoration: none;
}

nav ul {
width: 100%;
text-align: center;
padding: 0;
margin: 10px 0;
}
nav li {
display: block;
padding: 10px;
}
#menu {
display: none;
}
@media screen and (min-width: 320px) and (max-width: 480px) {
#logo {
    font-size: 2em;
    text-align: center;
    text-transform: uppercase;
    margin: 0 auto;
}
#menu {
    display: none;
}
nav ul li {
    box-sizing: border-box;
    width: 100%;
    padding: 15px;
}
}
@media screen and (min-width: 480px) and (max-width: 768px) {
#menu {
    display: none;
}
#logo {
    text-align: center;
    font-size: 2em;
    text-transform: uppercase;
    margin: 0 auto;
}

}

---

您应该在媒体查询中设置

（最大宽度：479px）

或

（最小宽度：481px）

。在默认规则下设置时，您不需要在媒体查询中定义

#菜单{display:none；}

。我现在更改了它，但什么也没有发生。我有#菜单{display:none}bcs我有slicknav菜单，我想隐藏我的原始菜单。我想要手机和平板电脑上的下拉菜单。在更大的屏幕上，我将隐藏这个下拉菜单，我将使用我创建的原始菜单。