我的导航器在用户使用移动设备时出现问题。我希望导航器随浏览器一起扩展,我已经尝试了很多东西.. 似乎没有任何效果。
这是我的 HTML。
<ul class="mobilemenu">
<li><a href="http://workbyjimmi.se/construction.html">ABOUT ME</a></li>
<li><a href="http://workbyjimmi.se/construction.html">PORTFOLIO</a></li>
<li><a href="http://workbyjimmi.se/construction.html">PROJECTS</a></li>
<li><a href="http://workbyjimmi.se/construction.html">CONTACT</a></li>
</ul>
这是我的 CSS。
.mobilemenu
{
display: block;
list-style: none;
position: relative;
width: 100%;
margin: auto;
text-shadow: 0px 0px 10px #000;
filter: dropshadow(color=#000, offx=0, offy=0);
}
.mobilemenu li
{
display: block;
line-height: 40px;
margin-top: 2%;
width: 40%;
text-align: center;
background-color: rgba(135,6,29,0.8);
letter-spacing: 3px;
}
您也可以查看我的页面并将其缩小,直到您看到另一个导航器。
www.workbyjimmi.se
最佳答案
您需要使用媒体查询。您可以在这里找到更多关于它们的信息:http://css-tricks.com/css-media-queries/
*我可能没有理解您正在尝试做的事情。但即使我的示例是错误的,您也可以使用媒体查询来帮助定位不同的设备。您可以针对特定的屏幕尺寸进行媒体查询,以在导航中产生所需的差异。如果你想了解更多信息,谷歌中有一种信息基调。
我也用你的代码做了这个,尝试调整预览窗口的大小以查看菜单如何变化。 http://jsfiddle.net/2mDxa/3/
HTML
<ul class="mobilemenu">
<li><a href="http://workbyjimmi.se/construction.html">ABOUT ME</a></li>
<li><a href="http://workbyjimmi.se/construction.html">PORTFOLIO</a></li>
<li><a href="http://workbyjimmi.se/construction.html">PROJECTS</a></li>
<li><a href="http://workbyjimmi.se/construction.html">CONTACT</a></li>
</ul>
CSS
body{ margin: 0; }
.group:before,
.group:after,
.mobilemenu:before,
.mobilemenu:after{
content: "";
display: table;
}
.group:after, .mobilemenu:after {
clear: both;
}
.group, .mobilemenu {
zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}
.mobilemenu
{
display: block;
list-style: none;
position: relative;
width: 100%;
margin: 0px;
padding: 0px;
text-shadow: 0px 0px 10px #000;
filter: dropshadow(color=#000, offx=0, offy=0);
}
.mobilemenu li{
display: block;
line-height: 40px;
margin-top: 0;
width: 25%;
float: left;
text-align: center;
background-color: rgba(135,6,29,0.8);
letter-spacing: 3px;
}
/* Desktops and laptops ----------- */
@media only screen
and (max-width : 1224px) {
/* Styles */
.mobilemenu li{
width: 100%;
float: none;
}
}
在您的评论之后,您的意思是这样的规模吗?:http://jsfiddle.net/2mDxa/4/
关于html - 使用浏览器让我的导航器改变大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20399185/