html - 使菜单栏响应

Question

我正在将我的网站转换为响应式布局。我已经使用媒体查询为大部分内容实现了这一点，但无法让菜单(仅使用 CSS 和 HTML)工作；它仍然位于 920px。

代码如下:

<div class="navigation_bar">

    <div id="main_menu">
        <div class="menu-main-menu-container">
            <ul class="homedropdown" id="menu-main-menu"><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-42" id="menu-item-42"><a href="http://localhost/safesteps/fire/">Fire</a></li>
                <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-43" id="menu-item-43"><a href="http://localhost/safesteps/flood/">Flood</a></li>
                <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-44" id="menu-item-44"><a href="http://localhost/safesteps/typhoons/">Typhoons</a></li>
                <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-45" id="menu-item-45"><a href="http://localhost/safesteps/earthquake/">Earthquake</a></li>
                <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-46" id="menu-item-46"><a href="http://localhost/safesteps/emergency-kit/">Emergency Kit</a></li>
                <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-47" id="menu-item-47"><a href="http://localhost/safesteps/pandemics/">Pandemics</a></li>
                <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-48" id="menu-item-48"><a href="http://localhost/safesteps/droughts/">Droughts</a></li>
            </ul></div>               </div>

    <div class="clear"></div>
</div>

CSS

   .navigation_bar {
        background: none repeat scroll 0 0 #E1E1E1;
        height: 46px;
        margin: 0;
        width: 100%;
    }

ul.homedropdown a {
    background-image: none;
    color: #FFFFFF;
    display: block;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 42px;
    margin-bottom: 0;
    padding: 0 18px;
    position: relative;
    text-align: left;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    border: 0 none;
    vertical-align: baseline;
}
ul, li {
    list-style: none outside none;
}

这是当前布局的屏幕截图:

我该如何解决？

Answer 1

如果您希望网站在浏览器窗口宽度低于 920px 时保持固定宽度，请尝试使用 min-width css-property，如下所示:

    body {min-width: 960px;} //this is your main container class and will apply a minimum width of 960px to the entire site    .navigation_bar {        background: none repeat scroll 0 0 #E1E1E1;        height: 46px;        margin: 0;        width: 100%;        min-width: 920px; //this might need to be increased a bit    }

这不是最好的方法(而且不是真正的响应式)并且对许多人来说有点过于硬编码，但通常效果很好。菜单将消失，但滚动条将出现在浏览器窗口的底部。您还可以尝试使用百分比或动态属性来调整响应能力。