2012-11-03 2 views
12

Eine Menge Leute, die HTML-Markup sieht wie folgt aus:Sollen wir Breite auf div # Wrapper oder die <body> setzen?

<html> 
    <body> 
    <div id="wrapper"> 
     <p>Stuff in here</p> 
    </div> 
    </body> 
</html> 

Und die meiste Zeit in den Beispielen hier, oder im Internet, die Menschen legen nahe, dass Sie Breite Einstellungen auf die #wrapper anstelle des <body> gelten sollte.

Gibt es einen Grund dafür?

Zum Beispiel in einem Artikel über techniques for gracefully degrading media queries, und Sie einige Kontext auf Technik 1 geben: Nichts tun:

Der Elefant im Raum ist Internet Explorer für den Desktop. Mit einer mobilen ersten Lösung, große Bildschirm für den Benutzer, Weg vorbei an dem festgelegten Höchst für Komfort den Inhalts in einer Spalte, was zu einer schmerzhaften Leseerlebnis Anzeige: 50 bis 75 Zeichen. Es könnte sich lohnen, eine Eigenschaft für maximale Breite in Ihrem Hauptcontainer festzulegen und dann diese maximale Breite in einer Medienabfrage zu erhöhen.

Und ihre CSS:

#wrapper { 
_width: 460px; /* Take that, IE6! */ 
max-width: 460px; 
} 

@media only screen and (width) { 

#wrapper { 
    max-width: 1200px; 
} 
} 

Hier how it'd come together for IE (Medienabfrage wird kommentiert out).

Würde es einen Unterschied geben, anstatt es auf #wrapper anzuwenden, würden wir es auf <body> anwenden - mit Blick auf die Standard-Website?

Mögliche Fehler? I tried it here, und es scheint in Ordnung zu sein. Was ist, wenn das Layout weiter entwickelt wird ...

+1

Es gibt keinen wirklichen Grund, einen Wrapper div in diesen Tagen nicht mehr zu haben. – BoltClock

+0

Zahlen. Aber wie kommt es? – Baumr

Antwort

4

Nun, Sie wollen so wenig Elemente wie möglich verwenden, denke ich. Es gibt jedoch viele Fälle, in denen # page-wrapper und body nicht austauschbar sind. In vielen Situationen müssen Sie den Körper als Hintergrundfarbe anstelle des HTML-Tags verwenden. In diesen Fällen (gewichtete Fußzeilen zum Beispiel) benötigen Sie den Körper, um den HTML-Code auszudehnen, und Sie benötigen einen Wrapper, um den Inhalt aufzunehmen, den Inhalt zu zentrieren und den Körper zu zwingen, sich auszudehnen und ihn zu enthalten.

Also - ich denke, ich würde sagen, dass die meisten Menschen einen Wrapper verwenden, weil sie es in ihrer ersten Klasse oder Online-Tutorial sahen. Ich denke, dass es für viele eine Gewohnheit ist. Ich würde den Körper so lassen, wie es ist, und den Wrapper auf 0 auto begrenzen und eine maximale Breite verwenden, wie du es hast. Es ist nur EI 8 und vorher - can I use media queries ? - vielleicht sollten Sie EI 8 erkennen und ein einzigartiges Stylesheet erstellen. Ich finde, dass alles für mobil nach der Definition, meine Medienanfragen nach, dass nur ein paar Zeilen Iteration sind -

+1

+1 für die "weil sie es in ihrer ersten Klasse sahen". Ich weiß, für mich ist es ein Habit, weil Klienten immer dazu neigen, ihre Meinung zu ändern, und es ist einfacher, sie zu haben, als später damit herumzuspielen, und natürlich habe ich es so gelernt! –