Wie kann ich Medienabfragen für responsive Layouts in Bootstrap 3 verwenden?

Nutzung von Medienabfragen für responsive Layouts in Twitter Bootstrap 3

In Bootstrap 3 spielen Medienabfragen eine entscheidende Rolle bei der Anpassung von Layouts an verschiedene Bildschirme Größen. Beispielsweise möchten Sie möglicherweise die Schriftgröße basierend auf der Bildschirmbreite anpassen. So erreichen Sie dies mithilfe von Medienabfragen:

Medienabfrageselektoren für Bootstrap 3

Um bestimmte Bildschirmgrößen anzusprechen, verwenden Sie die folgenden Selektoren:

• @media(max-width:767px): Bildschirme mit einer maximalen Breite von 767px
• @media(min-width:768px): Bildschirme mit einer Mindestbreite von 768px (entspricht Tablets)
• @media(min-width:992px): Bildschirme mit einer Mindestbreite von 992px (Laptops)
• @media(min-width:1200px): Bildschirme mit einer Mindestbreite von 1200 Pixeln (große Desktops)

Anpassungen der Schriftgröße

Um die Schriftgrößen entsprechend der Bildschirmgröße anzupassen, verwenden Sie entsprechende CSS-Regeln Medienabfrage. Zum Beispiel:

@media (max-width: 767px) {
  body {
    font-size: 12px;
  }
}

@media (min-width: 768px) {
  body {
    font-size: 14px;
  }
}

Hinweis:

Beachten Sie, dass in Bootstrap 3 versteckte Klassen verfügbar sind, die beim Debuggen helfen:

<span class="visible-xs">SIZE XS</span>
<span class="visible-sm">SIZE SM</span>
<span class="visible-md">SIZE MD</span>
<span class="visible-lg">SIZE LG</span>

Das obige ist der detaillierte Inhalt vonWie kann ich Medienabfragen für responsive Layouts in Bootstrap 3 verwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!