Jquery 切换不';不能在移动设备上工作
我正在努力建立一个反应迅速的网站。 我以前从未使用过@media标签,所以我不确定我是否做错了什么Jquery 切换不';不能在移动设备上工作,jquery,html,css,toggle,media,Jquery,Html,Css,Toggle,Media,我正在努力建立一个反应迅速的网站。 我以前从未使用过@media标签,所以我不确定我是否做错了什么 当窗口大小小于550px时,导航应为滑动切换菜单 当我缩小浏览器窗口时,它会工作,但在我的iPhone上不会。 我希望导航切换到550px,收割台高度切换到切换高度(2em) 我希望你能帮助我 HTML: 我的技巧是,在每次mediaquery之后,我都会将一个元素着色为重颜色,这样我就可以看到在查询时发生了什么 @媒体屏幕和(最大宽度:320px){ 标题{背景色:红色;} }我的技术是,在每
当窗口大小小于550px时,导航应为滑动切换菜单 当我缩小浏览器窗口时,它会工作,但在我的iPhone上不会。 我希望导航切换到550px,收割台高度切换到切换高度(2em) 我希望你能帮助我 HTML:
我的技巧是,在每次mediaquery之后,我都会将一个元素着色为重颜色,这样我就可以看到在查询时发生了什么
@媒体屏幕和(最大宽度:320px){
标题{背景色:红色;}
}
我的技术是,在每次mediaquery之后,我都会将一个元素着色为浓色,这样我就可以看到在查询时发生了什么
@媒体屏幕和(最大宽度:320px){
标题{背景色:红色;}
}
什么不起作用?当窗口大小小于550px时,导航应该是一个滑动切换菜单。请用该信息更新您的问题。你还必须在你的问题中包括出了什么问题,以及你预期会发生什么。好的,请更改它,谢谢!Np,只要记住当你在这里问问题的时候。人们需要确切地知道出了什么问题,以及你希望发生什么来帮助你(通常)。什么不起作用?当窗口大小小于550px时,导航应该是一个滑动切换菜单。请用这些信息更新你的问题。你还必须在你的问题中包括出了什么问题,以及你预期会发生什么。好的,请更改它,谢谢!Np,只要记住当你在这里问问题的时候。人们需要确切地知道出了什么问题,以及你期望发生什么事情来帮助你(通常)。谢谢satinez,我试过了。但它仍然只在浏览器中工作。即使我只使用带有颜色的小代码,也会有变化,但在我的iPhone上-什么都没有。-iPhone有哪种分辨率?-你是否在HTML中添加了正确的元标记变焦是100%吗?也许你可以给我们一些示例站点,或者用JSFIDLE构建它。因此,我们可以看到和帮助更好。请访问www.niklasheinecke.com/testOk,谢谢。我看到了错误。1.Mediaquery工作正常。2.你必须定义当你点击“汉堡”时会发生什么,我看不出有定义。这个开关没有定义在什么地方,对吗?3.你可以只使用css,也可以混合使用js。谢谢satinez,我试过了。但它仍然只在浏览器中工作。即使我只使用带有颜色的小代码,也会有变化,但在我的iPhone上-什么都没有。-iPhone有哪种分辨率?-你是否在HTML中添加了正确的元标记变焦是100%吗?也许你可以给我们一些示例站点,或者用JSFIDLE构建它。因此,我们可以看到和帮助更好。请访问www.niklasheinecke.com/testOk,谢谢。我看到了错误。1.Mediaquery工作正常。2.你必须定义当你点击“汉堡”时会发生什么,我看不出有定义。这个开关没有定义在什么地方,对吗?3.你可以只使用css,也可以混合使用js。
<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>
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;
}