Festen header und eine ansprechende website-Thema
Habe ich versucht, eine website zu erstellen mit einem festen header, aber die ist auch responsive. Hier ist was ich habe, so weit. Ich würde kleben Sie es in ein jsfiddle aber Sie können nicht sehen, was ich versuche zu erklären. Die .css ist in der .scss format wie die .css komprimiert.
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;
}Was ich am nach ist, wenn der Benutzer auf ein iPhone können sagen, dass die nav schrumpft downs und den text nicht unterschritten wird. Muss ich media queries? Wenn ja, gibt es einen schnellen Weg, um Sie zu tun für alle Geräte?
InformationsquelleAutor joshuahornby10 | 2012-12-06
Schreibe einen Kommentar
Du musst angemeldet sein, um einen Kommentar abzugeben.
Ja, Sie brauchen, um media queries. Nicht sicher, wie Sie schreiben, wäre eine "responsive" Website, ohne Ihnen, wenn Sie es Taten, all in js, und dass wäre der Wahnsinn.
Blick auf diesen link für bessere details:
http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
Aber hier ist die Idee:
So auf kleineren Bildschirmen, die Sie bekommen ein #nav-wrapper-Breite von 480px;
Die Allgemeine Idee von responsive design ist, von mobile bis. Aber der link, den ich gab, erklären alle, dass Ihnen.
Auch Ihre Beispiel-code, nicht ein Inhalt block oder irgendetwas neu zu definieren, in der ein Beispiel. Aber angenommen, Sie haben ein div namens "main_content" man könnte sagen, Sie haben einen margin-top so, dass es wird klar, dass die header -, nav-oder was auch immer sonst Ihnen immer in den Weg. Ich denke, in diesem Fall, echte Beispiele, die sind nicht so notwendig, als die wichtigsten, da könnten wir füllen, bis die ganze Seite für alle Geräte und dimension der Möglichkeiten. Beste Weg, es zu tun ist, um Ihre Hände schmutzig und Praxis. Es ist wirklich nicht schwer sich daran zu gewöhnen.
Als einen schnellen Weg, um die Abdeckung der amm, wie ein "is_mobile" ... Nein, nicht versuchen, das zu tun. Wie jemand wies darauf hin vor kurzem, die definition von "mobile" verändert sich täglich. Versuchen, um das Ziel "mobile" wird nur gehen, um ein großes Durcheinander zu versuchen, zu behaupten, dass.
Könnten Sie schreiben eine media query für max-width-768px wenn Sie don ' T care, wenn Sie auf einem mobilen Gerät oder nicht, nur um einen kleinen Ausblick.
gut, du bist nicht wirklich schreiben über und über. Responsive design ist mehr als nur eine Menge von css. Es ist die Gestaltung der html-flexibel genug sein, wo ein paar Unterschiede in css kann alles, was erforderlich ist, um die Umstrukturierung display. Auch bei komplexen Seiten, die ich nie hatte, mehr zu schreiben als ein paar änderungen in den Medien Abfrage css.
Und ja, Sie würden nur neu definieren, die wrapper in diesem Fall, da ich denke, dass ist Ihre Zentrierung container.
Ok Super vielen Dank für deine sehr ausführliche Antwort. Ein letztes denken Sie, würden Sie beginnen mit dem HTML -, dann ist Stil für einen desktop-Bildschirm, dann media queries, oder starten Sie mit media queries und arbeiten?
Es ist irgendwie schwierig zu erklären, aber im Allgemeinen beginnen Sie mit html, aber zu wissen, dass Sie entwerfen zu flüssig und reaktionsschnell. Wenn Sie sagen mobile, ist es vor allem, weil die cascade-Auftrag von css ist top-down, also untere überschreibt oberen if-Selektoren gleich sind. Nicht unbedingt, dass Sie design für mobile-first, aber Sie definieren mobile-first, um in Ihrem css. also standardmäßig Ihre site angezeigt wird, für das kleinste Gerät, dann Kaskaden. Für mich habe ich alle gemeinsamen Website css über alle Medien-Anfragen.
InformationsquelleAutor Kai Qing