Wie kann ich die Schriftgröße in Bootstrap mithilfe von Medienabfragen reaktionsschnell anpassen?

Verwenden von Medienabfragen zum reaktionsschnellen Anpassen von Schriftgrößen in Bootstrap

Bootstrap 3 bietet Medienabfragen, mit denen Entwickler Stile je nach Bildschirmgröße ändern können. So passen Sie Schriftgrößen mithilfe von Medienabfragen an:

Bootstrap 3

1. Verwenden Sie die folgende Medienabfrage Selektoren:

@media (max-width: 767px) {}
@media (min-width: 768px) {}
@media (min-width: 992px) {}
@media (min-width: 1200px) {}

2. Beispiel:

@media (min-width: 768px) {
  h1 {
    font-size: 1.5rem;
  }
}

Bootstrap 4

1. Verwenden Sie die folgende Selektoren:

@media (min-width: 576px) {}
@media (min-width: 768px) {}
@media (min-width: 992px) {}
@media (min-width: 1200px) {}

2. Bedenken Sie, dass „extra klein“ die Standardeinstellung ist. Codieren Sie also zuerst XS-Größen und überschreiben Sie sie dann mit Medienabfragen.

Bootstrap 5

1. Verwenden Sie Folgendes Selektoren:

@media (min-width: 576px) {}
@media (min-width: 768px) {}
@media (min-width: 992px) {}
@media (min-width: 1200px) {}
@media (min-width: 1400px) {}

2. Beispiel:

@media (min-width: 992px) {
  h1 {
    font-size: 1.75rem;
  }
}

Hinweis: Diese Selektoren sind ab Bootstrap-Version 3.4 konsistent geblieben. 1, 4.6.0 und 5.3.0.

Das obige ist der detaillierte Inhalt vonWie kann ich die Schriftgröße in Bootstrap mithilfe von Medienabfragen reaktionsschnell anpassen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!