html - 使用浏览器让我的导航器改变大小

Question

我的导航器在用户使用移动设备时出现问题。我希望导航器随浏览器一起扩展，我已经尝试了很多东西.. 似乎没有任何效果。

这是我的 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

Answer 1

您需要使用媒体查询。您可以在这里找到更多关于它们的信息: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/