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:
@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:
body{
background-color:#fff;
}
*{
margin:0;
padding:0;
}
header{
background-color:red;
width:100%;
height:70px;
}
.content{
margin:30px auto;
width:1200px;
}
.leftside{
float:left;
width:550px;
}
.rightside{
float:right;
width:550px;
}
.box{
background-color:red;
width:100%;
height:300px;
}
.box1{
background-color:blue;
width:100%;
height:300px;
}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:
@media screen and (max-width:1200px){
.content{
width:100%;
margin:0 auto;
}
.leftside{
float:none;
width:100%;
margin-top:10px;
}
.rightside{
float:none;
width:100%;
margin-top:10px;
}
}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.
