[ad_1]
Erfahren Sie, wie Sie Ihre Website mithilfe von Medienabfragen in CSS auf Desktops, Tablets und Mobiltelefonen responsive gestalten.
Was sind Medienabfragen?
In CSS werden Medienabfragen verwendet, um Stile auf Ihrer Website basierend auf den Eigenschaften des Benutzergeräts anzuwenden. Es hilft Ihnen, Ihre Website auf allen Geräten (Desktops, Tablets und Mobiltelefone) responsiv zu gestalten.
Videoanleitung
Wenn Sie lieber einem Video-Tutorial folgen möchten, sind Sie hier richtig:
Wir werden eine Rasterspalte verwenden. Nehmen wir also an, Sie haben einen Zeilencontainer mit 12 Spalten darin.
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
<div class="col">4</div>
<div class="col">5</div>
<div class="col">6</div>
<div class="col">7</div>
<div class="col">8</div>
<div class="col">9</div>
<div class="col">10</div>
<div class="col">11</div>
<div class="col">12</div>
</div>Zunächst sagen wir, dass die Zeile ein Raster mit insgesamt 12 Spalten sein wird. Dabei ist jede Spalte gleich groß.
.row {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-gap: 5px;
}Medienabfrage für Desktop
Für Desktop-Geräte können Sie die folgende Medienabfrage in CSS schreiben.
/* for desktop */
@media (min-width: 992px) {
.col {
grid-column: auto/span 1;
}
}Es prüft, ob die Gerätebreite 992 Pixel überschreitet, und teilt dann die Spalte in 12 Teile auf. dh 12 / 1 = 12 Spalten
Medienabfrage für Tablet
Die folgende Medienabfrage wird für Tablet-Geräte verwendet.
/* for tablets */
@media (min-width: 768px) and (max-width: 991px) {
.col {
grid-column: auto/span 3; /* 12 / 3 = 4 columns for tablet */
}
}Medienabfragen für mobile und kleine Geräte
Für mobile Geräte zeigen wir zwei Spalten und für kleine Telefone (mit einer Auflösung von weniger als 767 Pixel) eine Spalte.
/* for mobile */
@media (max-width: 767px) {
.col {
grid-column: auto/span 6; /* 12 / 6 = 2 columns for mobile */
}
}
/* for small devices */
@media (max-width: 320px) {
.col {
grid-column: auto/span 12; /* 12 / 12 = 1 column for small devices */
}
}Das ist es. So können Sie Medienabfragen in CSS nutzen und Ihre Website für alle Geräte responsive gestalten. Wenn Sie bei der Befolgung dieser Anleitung auf Probleme stoßen, lassen Sie es mich bitte wissen.
