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/

*我可能会想念您正在尝试做什么。但即使我的示例有误，您也可以使用媒体查询来帮助定位不同的设备。您可以进行媒体查询以定位特定的屏幕尺寸，以便在导航中获得所需的差异。如果您想了解更多信息，Google中会有一种信息。

我也是从您的代码中做到这一点，尝试调整预览窗口的大小以查看菜单的更改方式。 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/

使用浏览器更改导航器的大小

1 个答案: