html - 分辨率兼容 - HTML

Question

我的导航菜单有这个问题，当我更改屏幕分辨率时，菜单会变得一团糟。这是我在 jsfiddle 中的代码:http://jsfiddle.net/qh5u47t2/ .帮助将不胜感激。谢谢。

<div id="topMenuDiv" style="background-color: gray; height: 20%; width:99%; margin: 0 0 -2px 0; position: absolute; top: 0px; border: 1px solid red;">
    <div class="navigation" style="height:100%; width:100%;">
        <ul class="menu">

这些是我的菜单的主要 HTML 代码，CSS 是:

.navigation {
    float: right;
    margin: 0 auto;
}

ul.menu {
    margin: 0 0 0 0;
    padding: 0;
    position: absolute;
    top: 65%;
    left: 20%;
    list-style: none;
}

Answer 1

我已经尝试重新调整你的 JSfiddle 的大小，在我看来你的代码没有响应，如果没有在顶部窗口(可视区域)分配足够的“空间”，它不会回流内容来展示这一切。Bootstrap Grid 系统将帮助您完成工作，包括开箱即用地处理各种屏幕分辨率。根据我的经验，这是非常值得学习的。一些帮助您入门的链接:http://getbootstrap.com/css/#grid (网格系统)您可以在此处查看一些模板:http://getbootstrap.com/getting-started/#examples

希望对你有帮助