Question

我正在尝试建立一个响应式网站。我之前从未使用过@media标签，所以我不确定我是否做错了。

当窗口大小小于550像素时，导航应该是一个幻灯片切换菜单。

当我减少浏览器窗口时，它会起作用，但不会在我的iPhone上。我希望导航更改为550px的切换，标题高度更改为切换高度（2em）。

我希望你能帮助我。

HTML：

<meta name="viewport" content"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">


<div id="header">
    <section id="menubar">
        <ul>
            <li><a class="menubutton" href="#menu"><img src="images/menu.png" /></a></li>
        </ul>
    </section>
        <nav class="nav">
            <ul>
                <li><a href="test.html">test</a></li>
                <li><a href="test.html">test</a></li>
                <li><a href="test.html">test</a></li>
                <li><a href="test.html">test</a></li>
                <li><a href="test.html">test</a></li>
            </ul>
        </nav>
</div>

和css：

ul {
margin:0px;
padding:0px; }

li {
list-style:square;
font-weight:100;
color:#000000;
line-height:1em;
padding:0em; }

a {text-decoration: none; }

div#header {
position: fixed;
height: 6.250em;
width: 100%;
background-color: #fff;
top: 0;
z-index: 999; }

#menubar {
display:block;
background:#ffffff; }

#menubar ul {
display:block;
width:2em;
padding:0.9em; }

#menubar ul li {
display:inline; }

#menubar ul li a.menubutton {
display:none; }

#menubar img {
width:90%;
height:auto;
max-width:100%; }

nav ul {
display:block;
position: absolute;
left: 15%;
bottom: 0.625em;
font-size: 0.875em; }

nav ul li {
display:inline;
margin:0em 0.625em 0em 0em; }

nav ul li a {
color:#000; }

nav ul li a:hover {
color:#cc9900; }

nav ul li a.active {
color:#cc9900; }

@media screen and (min-width:600px) {
nav.nav {
    display:block !important;
}
}

@media screen and (max-width:550px) {
#menubar ul li a.menubutton {
    display:block;
}   
nav {
    display:none;
    height:auto;
}
nav ul li {
    display:block;
    margin:0.2em 0em 0.2em 0em;
}
}

@media screen and (max-width:550px) {
div#header {
height: 2em !important;
}

@media screen and (max-width:550px) {
div#content {
top: 2em !important;
}

Answer 1

我的技术是，在每次媒体查询后，我将一个元素着色为重色，所以我可以看到什么时候发生的事情。

＆＃13;

@media screen and (max-width: 320px) {
  header { background-color: red; }
}

＆＃13;

对我来说 - 320px =红色，480px =橙色，760px =绿色

迎接; S

切换不适用于移动设备

1 个答案: