Fixed header and a responsive website issue

问题

I have been trying to create a website with a fixed header but which is also responsive. Here is what I have so far. I would stick it in a jsfiddle but you can't see what I am trying to explain. The .css is in the .scss format as the .css is compressed.

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

What I am after is when the user is on an iPhone lets say the nav shrinks downs and the text doesnt drop below. Will I have to use media queries? If so is there a quick way to do them for all devices?

回答1:

Yes, you will need to use media queries. Not sure how you would write a "responsive" site without them unless you were doing it all in js and that would be insane.

Look at this link for better details: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

But here's the idea:

@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;
    } 

}

So on smaller screens you get a #nav-wrapper width of 480px; The general idea of responsive is to design from mobile up. But the link I gave will explain all of that to you.

Also, your sample code doesn't have a content block or anything to redefine in an example. But supposing you have a div called "main_content" you could tell it to have a margin-top such that it will clear the header, nav or whatever else you have getting in the way. I think in this case, real examples aren't as necessary as the principal since we could fill up the whole page covering all devices and dimension possibilities. Best way to do it is to get your hands dirty and practice. It's really not hard to get used to.

As for a quick way to cover the amm, like a "is_mobile" ... no, don't try to do that. As someone pointed out recently, the definition of "mobile" is changing daily. Trying to target "mobile" is just going to make a big mess trying to maintain that.

You could write one media query for max-width 768px if you don't care if they are on a mobile device or not, just to make a small view.

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

来源：https://stackoverflow.com/questions/13753512/fixed-header-and-a-responsive-website-issue

标签

html

css

html5

css3

css-position