HTML5/CSS3 Tutorial: Responsive Webdesign erstellen // deutsch

HTML5/CSS3 Tutorial: Responsive Webdesign erstellen // deutsch [#2]

3
33
SHARE
Facebook
Twitter

Ihr habt es euch gewünscht, nun ist es so weit! In diesem Tutorial zeige ich euch, wie ihr ein responsive Webdesign erstellen könnt, so passt sich eure Webseite ganz bequem dem Endgerät des Besuchers an.

Hier kannst du dir eine Demo anschauen:
http://htmlworldblog.de/responsiv/

Du willst das Script downloaden?
http://htmlworldblog.de/?wpdmdl=467

Pixel to EM Converter:
http://pxtoem.com

Entdecke den neuen Technik Kanal auf YouTube:
http://youtube.com/technikworld1

////////////////////////////////////////////////

Folge uns:

Facebook: http://facebook.com/htmlworld
Twitter: http://twitter.com/htmlworld
Google+: http://google.com/+htmlworld
Tumblr: http://htmlworldblog.tumblr.com

Dir hat das Video gefallen? Dann gebe dem Video doch einen Daumen nach oben und teile es mit deinen Freunden! Vielen Dank.

Eine HTMLworld-Produktion.
Mehr über uns: http://frickewebdesign.de

33 COMMENTS

  1. Leider kann man das Script nicht mehr runterladen, kann man das noch irgendwie hinkriegen?
    Ich würde echt gerne damit rumprobieren :D

  2. Mich würde Interessieren, wie sich das Ganze bei hoher Auflösung – Full HD und 4K verhält…. Kann der Autor was dazu sagen bitte?

  3. Ich schreibe das in SASS aber in der CSS-Datei steht es trozdem richtig drin, aber dennoch geht das mit dem verkleinern bei mir nicht, also unter @media screen… Halt die Mobile Version…

  4. Super gemacht!
    Schade nur, daß die Links nicht mehr funktionieren.

    Danke für Einsteiger genau das richtige!!

  5. bei mir Funktioniert es leider nicht, dass das dreizeillige Menü versteckt wird und der javascript – Abschnitt ebenso wenig. Kann mir einer helfen? Ich finde den Fehler nicht, habe schon überall geschaut, ob mr ein Semikolon oder doppelpunkt fehlr und ob ich einen Tag in der HTML Datei falsch gesetzt habe aber bin nciht fündig geworden.

  6. Wieso ist die SideBar bei mir nicht neben dem Artikel sie ist unter dem Artikel habe nun das Skript zum 2.Mal durchprogrammiert? Kann mir jmd helfen?

  7. Super Tutorial. Bei mir funktioniert inline-block nicht, kommt nicht daneben, sondern drunter, wollte deinen Code runterladen, kann ihn aber nicht finden. Bitte um Hilfe.

  8. Hi mich würde es echt interessieren was du arbeitest, und welchen Beruf man erleben musst um das hier zu machen :).

  9. trotz deines Tutorials bekomme ich es nicht hin, den Wert von Margin-Left von einer Area kleiner werden zu lassen. Er bleibt auf einem Konstanten wert. Kann sein, dass ich einfach Faile bitte um Hinweise …
    Also der Article bleibt mittig, aufwohl er sich mit bewegen soll …

    Edit: bei 25:00 sieht man das in etwa. htmlworld schrieb "margin: 1.25em, auto;" … ich habe "margin-left: 28em, auto;"

    … Edit: nach wiederholten anschauen hab ich gemerkt, das es bei dir gegen 34min automatisch ging … _S

  10. Zu aller erst: Verdammt gute Erklärung =) Dickes Lob.
    Nun zu meiner Frage:
    Ich habe in der Navigationsbar zwei Listenpunkte mehr hinzugefügt als hier im Video gezeigt. Wenn ich nun den Explorer auf die Größe eines Tabletdisplay ziehe oder kurz davor, bekomme ich entweder einen oder beide Listenpunkte ausserhalb der Navigationsleiste angezeigt. Wie kann ich das beheben??

  11. hallo

    eine frage und zwar kann man dein Script auch für Geschäft webseite benutzen ? (frage wegen Jquery code und soweiter, ob es von Licince erlaubt ist )

    Vielen danke
    und super Video
    weiter so ;)

  12. hallo danke für dein klasses Tut ich habe nun ein problem auf mein handy ist alles perfekt nur im header der text ist noch zu groß wie ändere ich das jetzt? lg Alex

  13. Ich habe ein Problem: Mein Bild im main article bleibt immer gleich groß und geht mit der Größe nicht runter wenn ich den Browser verkleinere. Und wenn ich meine Website am Handy öffne ist das Bild doppelt so weit wie die Website.

  14. Nachdem ich das mit der On Top Bar gemacht hatte war bei mir folgendes Problem, undzwar, dass das "Menü" also die drei Schwarzen Balken immer noch so riesig waren und nicht kleiner geworden sind, so wie im Video. Wäre nett wenn mir da jemand helfen könnte.

  15. Funktioniert leider nicht… Hab es mit XAMPP & Hostinger probiert, jQuery lokal, bei Google, bei jQuery als src. Selbst alert funzt nicht, den <a> durch <button> ersetzt + onClick function-> funzt nicht…

LEAVE A REPLY