2012-03-29 15 views
3

Ich bin dabei, ein reaktionsfähiges Webdesign diese paar Wochen zu erstellen. Ich habe viel über Responsive Webdesign gelesen, und eine der Methoden betrifft das Grid-System. Es gibt 978 Grid-System oder 12 Spalten Grid-System, etc. Ich bin nur nicht so sicher, wofür es verwendet wird, und wie man mit den Dateien, die bereits von der Website zur Verfügung gestellt wird, zu implementieren. Beispiel für die Website: http://960.gs/Responsive Web Design Grid-System-Implementierung

Und könnten Sie mir bitte erklären, was ist der Unterschied zwischen 24 Spaltenraster, 12 Spaltenraster, 16 Spaltenraster und viele mehr?

Danke für den Rat.

+0

Die Anzahl der Spalten ... aber was hat ein Gittersystem mit Responsive Webdesign zu tun? –

+0

vielleicht ein Fluidgitter erstellen? oder ich liege falsch in Bezug auf das Verständnis auf diesem Grid-System? –

Antwort

1

Ich bin ein Front-End-Web-Entwickler und während ich einige Layouts entworfen habe, behaupte ich nicht, ein "Experte Designer" auf alle Fälle zu sein. Aber ich habe viel Erfahrung in der Entwicklung reaktionsfähiger Designs in HTML, CSS3 und Javascript, so dass meine Erfahrungen/Kommentare unten stammen von:

Ich habe kurz die Grid-Systeme zu lesen und während sie nützlich sein können, ich don • Sie verwenden sie wirklich nicht - die Grundidee hinter Responsive Design besteht darin, Layouts zu erstellen, die keine feste Größe erfordern, und diese dann mit Medienabfragen ("Snap States") zu kombinieren. Für eine Webseite habe ich normalerweise 3 Layouts: eine mobile/kleine Version, eine mittlere und eine große. Jeder kann eine Breite von ca. 250px skalieren (Inhalt kann dynamisch innerhalb seines Containers erweitert werden, Bilder vergrößern sich usw.) und wenn Sie dann zu groß werden, "schnappen" Sie zum nächstgrößeren Layout. Zum Beispiel:

  • kleines Layout: 250 Pixel zu 450px (1-Säule)

  • Medium Layout: 450px bis 800 Pixel (2 Säulen)

  • großes Layout: 800 Pixel zu 1300px (3 Spalten)

auf diese Weise keine Spalte immer weniger ist als etwa 250 Pixel und nie größer als 450px so jede Spalte 200px zu strecken um in der Lage sein muss.

Persönlich würde ich einfach mit etwas einfach so anfangen und dann, nachdem Sie einige damit herumgespielt haben, dann lesen Sie mehr und vielleicht versuchen Sie, das Rastersystem einzubauen.

Und wenn Sie versuchen, das Frontend in HTML/CSS3 zu erstellen, würde ich nur mit CSS3 flexbox Layouts beginnen (Sie können auch "float" mit Prozentsätzen verwenden, wenn Sie IE und ältere Browser unterstützen möchten aber es ist ein wenig schwieriger):

http://www.html5rocks.com/en/tutorials/flexbox/quick/