Media Queries - Einfach erklärt!

  • Guten Tag liebe Leser -und Leserinnen,
    heute erkläre ich denen, die momentan Hilfe bei der mobilen Anpassung
    ihrer Internet Präsenz brauchen, wie man seine Homepage leicht mobil anpassen kann.

    Zu allererst benötigen wir eine kleine Homepage:
    Hier geht zum Screen

    Ohne einer mobilen Anpassung sieht das Ganze dann so aus ( wenn man es minimieren tut ) :
    Hier gehts zur Animation

    Natürlich möchten wir, dass der Header, sowie die Boxen an jedem Gerät automatisch angepasst wird.
    Das Ganze kann man mit den sogenannten Media Queries anpassen.

    Was sind überhaupt Media Queries?
    Um eine leichte mobile Anpassung mit CSS zu erhalten, kann man mit Hilfe von Medienabfragen das Ganze gut anpassen.

    Folgendes Beispiel einer Media Query:

    Code
    @media screen and (max-width:300px){
    .box{
      width:300px;
    }
    }

    Hier haben geschrieben, dass wenn das Gerät ein width, also eine Breite von maximalen 300px hat, dass die ".box" nur 300px Breite haben soll.
    Das heißt, dass man mit den Media Queries genaue Abfragen an die einzelne Systemgrößen machen kann.

    Kommen wir aber nun zu unserem Beispiel zurück!

    Der momentane Code der Homepage sieht wie folgt aus:

    Um das Ganze mobil anzupassen, müssen wir .leftside und .rightside, sowie .content in einer Media Query einbinden.

    Das Ganze würde dann wie folgt aussehen:

    Da wir dem .content eine Breite von 1200px gegeben haben, müssen wir der Media Query eine maximale Breite von 1200px geben.
    Natürlich müssen .leftside, sowie .rightside und .content eine Breite von 100% haben,
    damit das ganze mobil angepasst ist.

    Das Ergebnis kann sich sehen lassen:
    Hier gehts zur Animation

    Seid mir nicht böse, wenn ihr ein paar Rechtschreibfehler endeckt! :)

    Dann bedanke ich mich für eure Aufmerksamkeit,
    und ich hoffe, ihr werdet viel Spaß mit den Media Queries haben!

    Liebe Grüsse,
    Yumba.

    Einmal editiert, zuletzt von Yumba (20. Dezember 2015 um 16:59) aus folgendem Grund: Animationen waren down!

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!