固定标题和响应网站问题

我一直在尝试创建一个固定标题的网站，但也是响应式的。这是我到目前为止。我会坚持它在一个jsfiddle，但你不明白我想解释什么。由于.css被压缩，所以.css处于.scss格式。固定标题和响应网站问题

HTML：

<title> Skinny Beer </title> 

<meta name="description" content="/"> 
<meta name="author" content="Josh Hornby"> 
<meta name="author" content="@joshua_hornby"> 

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 


<link rel="stylesheet" href="design.css"> 

<link rel="stylesheet" href="stylesheets/base.css"> 
<link rel="stylesheet" href="stylesheets/skeleton.css"> 
<link rel="stylesheet" href="stylesheets/layout.css"> 

</head> 

<body> 
<div class="container"> 
<nav id="main-nav"> 
<div id="nav-wrapper"> 
    <div class="six columns" 
     <div id="logo" style="background-color:black;"></div> 
    </div> 

     <div class="ten columns"> 
      <ul> 
       <span class="nav-links"> 
        <li><a href="index.html">Home</a></li> 
        <li><a href="index.html">About</a></li> 
        <li><a href="index.html">Beer</a></li> 
        <li><a href="index.html">Contact</a></li> 
     </div> 
</div> 
</nav>

CSS：

#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; 

ul { 
    position: relative; 
    margin-top: 10px; 
} 

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

a { 
    text-decoration: none; 
} 
} 

#nav-wrapper { 
position: relative; 
margin-left: auto; 
margin-right: auto; 
width: 800px; 
} 

#logo { 
height: 25px; 
width: 118px; 
display: inline-block; 
float: left; 
padding: 5px 10px; 
margin-top: 11px; 
margin-left: -13px; 
}

我什么后，当用户在iPhone上让说导航缩小，文字不下降。我必须使用媒体查询吗？如果是的话，是否有快速的方法来完成所有设备？

来源

2012-12-06 joshuahornby10

是的，您将需要使用媒体查询。不知道如何在没有它们的情况下编写一个“响应式”网站，除非你在js中完成所有这些工作，而这将是疯狂的。

看看这个链接，更出众的细节： http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

但这里有一个想法：

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) { 

    #nav-wrapper { 
     position: relative; 
     margin-left: auto; 
     margin-right: auto; 
     width: 480px; 
    } 

}

因此在小屏幕上，你得到的480像素一个＃NAV-包装宽度; 响应的总体思路是从移动设计开始。但是我给出的链接将向你解释所有这些。

此外，您的示例代码没有内容块或任何要重新定义的示例。但是假设你有一个叫做“main_content”的div，你可以告诉它有一个margin-top，这样它就可以清除header，nav或其他任何你已经得到的东西。我认为在这种情况下，真正的例子不像委托人那么必要，因为我们可以填写涵盖所有设备和维度可能性的整个页面。最好的办法是让你的手变脏并且练习。习惯真的不难。

至于覆盖amm的快速方法，如“is_mobile”...不，不要尝试这样做。正如有人最近指出的那样，“移动”的定义每天都在变化。试图将“移动”作为目标就是试图维持这一点。

如果您不在乎移动设备是否在移动设备上，您可以为最大宽度768px编写一个媒体查询，只是为了制作一个小视图。

@media only screen and (max-device-width : 768px) 
{ 
    /* styles here */ 
}

来源

2012-12-06 22:27:15

换句话说，如果max-device-width是768px我只是将＃div-wrapper更改为宽度768px？过去我使用过响应式框架，但从来没有让自己的媒体查询弄脏自己的手，但是这个项目需要这样做。在我看来，为不同大小的屏幕反复编写你的网站很多工作。 – joshuahornby10

好吧，你不是真的一遍又一遍地写。响应式设计不仅仅是许多CSS。它设计的html足够灵活，可以在重构显示所需的一切CSS的一些差异。即使在复杂的网站上，我从来不必在媒体查询CSS中编写更多的更改。 –

是的，因为我认为那是你的居中容器，所以你只需在这种情况下重新定义包装。 –

固定标题和响应网站问题

回答

相关问题