Responsive Design mit CSS Grid und vmax

Egal ob Mashup, Extensions oder die eigene Webseite,…

Entweder Sie nutzen Bootstrap, ein Framework für Responsive Design oder:

Nutzen Sie CSS Grid für Ihr Layout und für Ihre Schrifgröße anstelle von pixel em oder Prozent die vmax dieses Attribut bezieht sich auf die größere Angabe von vMin und vMax. Diese beiden Attribute beziehen sich wiederum auf den Viewport sprich der Displaygröße des Gerätes mit dem man die Seite betrachtet.

Mit sogenannten Media Queries können Sie dafür sorgen, das Ihre Seite auf unterschiedlichen Geräten anders aussieht. Achten Sie darauf das Sie als erstes die Mobilansicht definieren:

<div id="Container">
  <div id="Box1" class="box"></div> 
  <div id="Box2" class="box"></div>
  <div id="Box3" class="box"></div> 
  <div id="Box4" class="box"></div>
</div>

Mobil Phone – Boxen untereinander (CSS):

#container{
  position: relative;
  display: block;
}
#container .box{
  width: auto;
  height: auto;
  font-size: 0.9 vmax;
}

Tablet 2 Boxen nebeneinander in Horizontaler Ansicht:

#container{
  position: relative;
  display: block;
}
#container .box{
  width: auto;
  height: auto;
  font-size: 0.9 vmax;
}

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { 
  #container{
    position: relative;
    display: grid;
    grid-columns: 50% 50%
    grid-rows: 50% 50%
  }
  
}

Siehe auch:


Share