media queries

"Responsive Design" nennt sich die Vorgehensweise eine Site zu bauen, dass sie dem Browser oder Gerät auf welchem sie angeschaut wird antwortet ("responds")… und immer großartig aussieht.

Media queries sind das mächtigste Werkzeug um dies zu ermöglichen. Lasst uns unser Layout mit prozentualen Breiten nehmen und es einspaltig darstellen sobald das Browserfenster zu klein für ein Menü in der Sidebar wird: 

@media (min-width:600px) {
  nav {
    float: left;
    width: 25%;
  }
  section {
    margin-left: 25%;
  }
}
@media (max-width:599px) {
  nav li {
    display: inline;
  }
}
<div class="container">
<section>

Wenn du jetzt deine Browserfenstergröße änderst, passiert etwas ziemlich Cooles…

</section>
<section>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.

</section>

Tada! Nun schaut unser Layout sogar auf mobilen Geräten super aus. Hier findest du einige populäre Seiten, welche Mediaqueries auf diese Weise nutzen.. Es lässt sich noch weit mehr als min-width und max-width auslesen: Schau in der the MDN Documentation nach um mehr zu lernen.

Danksagung

Mit Hilfe von meta viewport kannst du dein Layout auf mobilen Geräten sogar noch besser ausschauen lassen.

  • Creative Commons License