我正在学习如何制作响应式网站。我下载了响应式网格系统,我正在学习这个系统的响应能力(你会看到我在html
截图中的内容。
现在我遇到了positioning
的麻烦。我使用media queries
。对于从320px
到480px
的移动视图,我没有问题,但是当我想将logo
置于480px
到768px
范围内时,我遇到了问题col span_6_of_12
(您也会在屏幕截图中看到)。我在一个logo
中有col span_6_of_12
,然后我在第二个col span_6_of_12
中有菜单。当我想让logo
居中时,此菜单col span_6_of_12
仍然存在,我无法使logo
居中(我希望您了解我。)
HTML and Chrome view - 以下是我在网站上的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;
}
}