0

我昨晚发布了一个关于使用媒体查询的问题固定标题和响应式网站问题

所以我以为我终于破解了它，但似乎发生的事情是当屏幕缩小时，文本会跳到左边并消失。我以为我所要做的就是制作#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 的东西，只是顶部的导航，然后是页面的标题和下面的内容。我试过查看它们的源代码，但它们使用的是自定义样式表，而且它们也被压缩了。

编辑

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

4

1 回答 1

0

The problem I see with your media query is that when the screen has a width bellow 767px you're telling the css processor to render the nav-wrapper element with a width of 767px. So, if a user accesses the page via a 480px width device, it would overflow the screen.

I'm not sure I understand what you're trying to accomplish, but my best suggest is to set the width to 100% in your media query (or delete it completely, and inherit the width:100% from the previous CSS declaration for that element).

于 2012-12-07T14:30:17.003 回答