Question

我昨晚发布了一个关于使用媒体查询的问题Fixed header and a responsive website issue

所以我认为我最终破解了它，但似乎发生的事情是当屏幕调整大小时，文本跳到左边并消失。我认为我所要做的就是让#nav-wrapper具有相同的尺寸和屏幕。

这是代码

HTML

<body>
<div class="container">
<nav id="main-nav">
    <div class="inner-nav" id="nav-wrapper">        
            <div class="ten columns">
                <ul>
                    <li><a href="/">Test</a></li>
                    <li><a href="/">Test</a></li>
                    <li><a href="/">Test</a></li>
            </div>
    </div>
</nav>


</body>
</html>

CSS - 以Scss格式压缩CSS

//Navigation
#main-nav {
-webkit-box-shadow: 0 2px 15px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0 2px 15px rgba(0,0,0,0.25);
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.25);
-webkit-transition: box-shadow 0.2s linear;
-moz-transition: box-shadow 0.2s linear;
-ms-transition: box-shadow 0.2s linear;
-o-transition: box-shadow 0.2s linear;
transition: box-shadow 0.2s linear;
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
display: block;
position: fixed;
top: 0;
left: 0;
float: left;
width: 100%;
z-index: 12;
height: 60px;
background-color: white;

#wrapper {
    position: relative;
}

.inner-nav {
    margin-left: auto;
    margin-right: auto;
    width: 800px;
}

ul {
    float: right;
    margin: 0;
    width: 600px;

    li {
        vertical-align: middle;
        display: inline;
        margin: 0 2px;
        color: black;
        list-style-type: none;

        a {
            text-decoration: none;
        }

    }

}
}

我正在调用的媒体查询

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {
    #nav-wrapper{
        width:767px;
    }

}

任何人都可以告诉我当屏幕移动时我必须这样做，让我们说导航只是调整大小以适合屏幕。另外我知道position:fixed我想要它的方式当用户滚动导航栏时保持在顶部。虽然如果有一种方法可以让导航栏覆盖整个站点的顶部，那么我就不必使用position:fixed作为我正在使用的框架（http://www.getskeleton.com/）似乎不允许我这样做此

我正在尝试设计类似https://simple.com/的设计，尽管不是jQuery的东西，只是顶部的导航，然后是页面上的标题和内容。我已经尝试查看它们的来源，但它们正在使用自定义样式表，它们也被压缩。

编辑

我可能不清楚我在追求什么，我想要一个具有固定标题的网站，这也是对移动设备的响应，它将适合屏幕。如果有人知道他们是如何做到这一点的话，那么这个简单的网站即将解决这个问题。

Answer 1

我在媒体查询中看到的问题是，当屏幕的宽度低于767px时，您告诉css处理器渲染宽度为767px的nav-wrapper元素。因此，如果用户通过480px宽度的设备访问该页面，它将溢出屏幕。

我不确定我理解您要完成的任务，但我最好建议您在媒体查询中将宽度设置为100％（或完全删除它，并继承宽度：100％来自之前的该元素的CSS声明。）

使导航工作在较小的屏幕上

1 个答案: