[英]toggle doesn't work on mobile devices
I am trying to build a responsive Website. 我正在尝试建立一个响应式网站。 I've never used the @media tag before, so I am not sure if I did anything wrong.
我以前从未使用过@media标签,所以我不确定我是否做错了。
The nav should be a slidetoggle menu when the window size is smaller than 550px. 当窗口大小小于550px时,导航应该是一个slidetoggle菜单。
It works when I decrease the browser window, but not on my iPhone. 它在我减少浏览器窗口时起作用,但在我的iPhone上却没有。 I want the nav changing to the toggle at 550px and the header height changing to the toggle height (2em).
我希望导航更改为550px的切换,标题高度更改为切换高度(2em)。
I hope you can help me. 我希望你能帮助我。
HTML: 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>
and the css: 和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;
}
My Technique is, after every mediaquery I colorise one element in a heavy color, so i can see whats happening when. 我的技术是,在每次媒体查询后,我将一个元素着色为重色,所以我可以看到什么时候发生的事情。
@media screen and (max-width: 320px) { header { background-color: red; } }
For me - 320px = red, 480px = orange, 760px = green 对我来说 - 320px =红色,480px =橙色,760px =绿色
greet;s 迎接; S
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.