2016-10-11 5 views
0

Hier ist der Link zu der Seite, die ich gemacht habe: https://thawing-savannah-89995.herokuapp.com/ Dies ist meine erste Webseite, die ich ohne Hilfe mit nur einer PSD gemacht habe.Wie kann ich diesen Abschnitt meiner Webseite ansprechen?

Hier ist ein SS der Gegend, mit der ich Probleme habe und bricht, wenn ich die Größe des Browsers verkleinern. Dieses Layout war sehr schwierig für mich und ich denke nicht, dass es so sein sollte. Wie kann ich HTML und CSS für diesen Teil besser gestalten?

enter image description here

+1

Hmm zu viel zu erklären. Zuerst. Herzliche Glückwünsche. Es sieht viel schöner aus als mein erstes Design. Check out http://getbootstrap.com/ insbesondere http://getbootstrap.com/css/#grid Es geht um ein CSS-Grid-System, das Ihre Website auf Ihre Bildschirmbreite neu anordnen. Außerdem verstecken Sie normalerweise Dinge, die auf kleinen Bildschirmen nicht gut aussehen, oder passen Sie Ihre Inhalte/Texte mit kürzeren Versionen an. – chickahoona

+1

Mein Vorschlag wäre, ein existierendes responsives Framework zu finden (Bootstrap/Foundation kommt mir in den Sinn) und strukturiere dementsprechend dein HTML. Identifizieren Sie verschiedene Abschnitte in Ihrem Design und wie sie mit den Elementen in Ihrem gewählten Framework übereinstimmen und schreiben Sie dann Ihren Code. Es ist viel einfacher, ein reaktionsfähiges Layout von Grund auf zu erstellen, anstatt es in den vorhandenen Code zu integrieren. – Serlite

Antwort

1

Ich habe nicht genug rep zu dem Zeitpunkt von diesem Post zu kommentieren. Entschuldigung, ich würde wenn ich könnte.

Ich schlage vor, eine Sache in css genannt flexbox. Es braucht ein wenig mehr Arbeit statt Bootstrap oder 960 oder etwas, aber in Kombination mit Prozenteinheiten und vielleicht sogar vh/vw, wenn Sie New Age sein wollen.

This guide erklärt es besser, als ich jemals hoffen könnte; im Grunde ist es ein dynamisches Ausrichtungssystem. Die Zentrierung wird im Vergleich zu den Alternativen trivial gemacht. Beachten Sie, dass Sie möglicherweise @media-Breakpoints benötigen, meist um die flex-direction zu ändern.

Es hat kürzlich almost (sorry IE) Universal-Browser-Unterstützung gewonnen. Wenn Sie sich für IE interessieren, verwenden Sie eine Unterlegscheibe wie flexibility.

Wenn Sie Bootstrap-ähnliche Grid-Systeme verwenden möchten, gibt es bessere alternatives, wenn Sie in sie suchen möchten. Persönlich kein Fan von Bootstrap (mehr ...) aber was auch immer dein Boot schwimmt, nehme ich an.

1

Die beste Lektion, die ich beim Erstellen von Responsive-Websites gelernt habe, besteht darin, zu entwerfen, wie dies auf einem mobilen Gerät aussehen soll, und sich auf dem Desktop zu arbeiten.

Ich kann vorschlagen, dass Sie Twitter Bootstap oder Foundation sowie das Herunterladen responsiver Vorlagen verwenden. Lesen Sie so viele Artikel, die Sie über verschiedene Techniken finden können, die Sie finden können, um Ihnen zu helfen, das Konzept der Vorgehensweise zu verstehen.

Verwandte Themen