使在小屏幕上

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

编辑

它可能不是很清楚我是什么之后，我想用一个固定的头，也响应等移动设备将装配到屏幕上的网站。如果有人知道他们是如何在那里做网站的话，那么简单的网站就是我正在努力的事情。

来源

2012-12-07 joshuahornby10

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

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

来源

2012-12-07 14:30:17 Augusto

多数民众赞成我认为我只是制定出来。但是，当用户使用480px设备时，正确的方法是什么？将宽度设置为100％或删除它并不能解决问题，因为它的行为就像没有媒体查询那样。 – joshuahornby10

我想我明白你想要做什么，在阅读你以前的问题后。我根本不会使用媒体查询，因为媒体查询主要用于修改元素通过CSS表示的方式。如果您试图保留元素的默认外观，则不需要修改其原始宽度。也许你需要调整导航里面的元素，因为他们可能不适合。如果您能够发布问题的截图，那将非常棒！ – Augusto

我之后是一个像这样的网站https://simple.com/换句话说，一个固定的导航，当在移动设备上查看网站时，它会缩小并导航栏更改。这是媒体查询即时猜测？有这样的网站模板吗？屏幕/内容的标题/内容。 – joshuahornby10

使在小屏幕上

回答

相关问题