CSS Media Query

CSS Media Query Teaser
jetzt liken

Mit Media Query kann das Seitelyout automatisch an die Bildschirmgröße angepasst werden, damit kann eine Seite für Mobil und Desktop optimiert werden. Sprich mit Media Query kann das Layout an den Bildschirm angepasst werden. Die wichtigsten Parameter sind min-width und max-width.

min-width

Mit min-width kann das CSS bei einer mindestbreite geändert werden.

body {
        background-color: white;
}
@media screen and (min-width: 480px) {
    body {
        background-color: black;
    }
}

Demo öffnen

max-width

Mit max-width kann bis zu einer Maximalgröße CSS Eigenschaften ausgespielt werden.

body {
        background-color: white;
}
@media screen and (max-width: 480px) {
    body {
        background-color: black;
    }
}

Demo öffnen

beide kombinieren

Mit and können beide Eigenschaften kombiniert werden.

body {
        background-color: white;
}
@media (min-width: 0px) and (max-width: 400px){
    body {
        background-color: #021ffd;
    }
}
@media (min-width: 400px) and (max-width: 600px){
    body {
        background-color: #fd0202;
    }
}

Demo öffnen

praktisches Beispiel

Mit einer horizontalen Navigation kann man am besten zeigen wie gut Media Querys sind. Bei diesem Beispiel wird aus der Ausgeklappten Navigation ein Dropdown Menü, damit es Mobil auch gut aussieht.
Demo öffnen

*{
  padding: 0px;
  margin: 0px;
}
.headernavigation_box {
  width: 100%;
  height: 50px;
  background-color: #000000;
  position: fixed;
  text-align: center;
  padding: 15px 0;
  box-sizing: border-box;
  box-shadow: 0 0 25px #000;
  border-bottom: 1px solid #ff9024;
  overflow: hidden;
}

.headernavigation_box a {
  color: #ffffff;
  padding: 5px 25px;
  border-right: 5px solid #ff9024;
  text-decoration: none;
  margin-right: 15px;
}

.headernavigation_box a.aktive {
  border-width: 1px 5px 1px 1px;
  border-color: #ff9024;
  border-style: solid;
}
@media only screen
and (min-width: 0px)
and (max-width: 720px){
  
  #navigationdropdown {
    display: block;
  }
  .headernavigation_box.in {
    height: 57px;
  }
  .headernavigation_box {
    height: 270px;
    padding: 0;
  }
  .headernavigation_box_button {
    width: 98%;
    height: 50px;
    padding: 15px !important;
    margin: 3px 1% 0 1%;
    display: block;
    box-sizing: border-box;
  }
}
<div class="headernavigation_box in">
      <a class="headernavigation_box_button dropdown" id="navigationdropdown" href="#">Menü</a>
      <a class="headernavigation_box_button aktive togglenavigation" data-nav="welcome" href="#welcome">Willkommen</a>
      <a class="headernavigation_box_button togglenavigation" data-nav="service" href="#service">Dienstleistungen</a>
      <a class="headernavigation_box_button togglenavigation" data-nav="refrecnce" href="#refrecnce">Referenzen</a>
      <a class="headernavigation_box_button togglenavigation" data-nav="location" href="#location">Anfahrt</a>
</div>
$("#navigationdropdown").click(function() {
      $(".headernavigation_box").toggleClass("in");
      $(".navigationarrowup").toggleClass("visible");
      $(".navigationarrowdown").toggleClass("visible");
      return false;
});
jetzt liken