让导航在更小的屏幕上工作答案

【问题标题】：Making nav work on smaller screens让导航在更小的屏幕上工作
【发布时间】：2012-12-07 23:38:34
【问题描述】：

我昨晚发布了一个关于使用媒体查询的问题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 的东西，只是顶部的导航，然后是页面的标题和下面的内容。我试过查看它们的源代码，但它们使用的是自定义样式表，而且它们也被压缩了。

编辑

我可能不清楚我的目标是什么，我想要一个具有固定标题的网站，它也是响应式的，因此在移动设备上它会适合屏幕。如果有人知道他们是如何在那里做的，那么这个简单的网站就是我正在努力的事情。

【问题讨论】：

标签： html css responsive-design media-queries

【解决方案1】：

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

我不确定我是否理解您要完成的工作，但我最好的建议是在您的媒体查询中将宽度设置为 100%（或将其完全删除，并从上一个继承宽度：100%该元素的 CSS 声明）。

【讨论】：

这就是我认为我刚刚解决的问题。但是，当用户在 480px 设备上时，正确的做法是什么？将宽度设置为 100% 或将其删除并不能解决问题，因为它的行为就像那里没有媒体查询一样。
在阅读了您之前的问题之后，我想我理解您想要做什么。我根本不会使用媒体查询，因为媒体查询（主要）用于修改元素通过 CSS 表示。如果您尝试保留元素的默认外观，则无需修改其原始宽度。也许您需要调整导航内的元素，因为它们可能不适合。如果您能够发布问题的屏幕截图，那就太好了！
我追求的是这样的网站simple.com 换句话说，固定导航，当在移动设备上查看该网站时，它会缩小并且导航会改变。那是我猜测的媒体查询？这样的网站有模板吗？跨屏幕/内容的标题/内容。
我的问题是我有标题，但是当它缩小时，任何文本都会跳到左边并像你说的那样离开屏幕。我想要的是当屏幕变小以使其缩小到浏览器的正确尺寸时。
好的，所以我建议每个宽度属性都应该用百分比来表示。完成后，您将看到元素如何调整到当前屏幕宽度。