我昨晚发布了一个关于使用媒体查询的问题 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 - 在 CSS 压缩后采用 Scss 格式
//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 的东西只是顶部的导航然后是页面上的标题和下面的内容。我试过查看它们的源代码，但它们使用的是自定义样式表，而且它们也被压缩了。
编辑
可能不清楚我在追求什么，我想要一个具有固定标题的网站，该标题也是响应式的，因此在移动设备上它会适合屏幕。如果有人知道他们是怎么做到的，那么这个简单的网站就是我正在做的事情。
最佳答案
我在您的媒体查询中看到的问题是，当屏幕的宽度低于 767px 时，您是在告诉 css 处理器呈现宽度为 767px 的 nav-wrapper 元素。因此，如果用户通过 480 像素宽度的设备访问该页面，它将溢出屏幕。
我不确定我是否理解你想要完成的事情，但我最好的建议是在你的媒体查询中将宽度设置为 100%(或者完全删除它，并继承 width:100% 从以前的该元素的 CSS 声明)。
关于html - 使导航在较小的屏幕上工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13764907/