Min-Width und Max-Breite in Medienfragen | Erklärt

Eine reaktionsschnelle Website wird als dynamische Website bezeichnet, die ihre Struktur entsprechend dem Gerät verändert, auf dem sie angezeigt wird. Es kann sein Verhalten je nach Bildschirmbreite, Bildschirmauflösung, Orientierung usw. des Geräts ändern. Um eine solche Website zu machen, nutzen Entwickler Medienfragen. Hier in diesem Artikel sind die diskutierten Themen wie folgt.

1. Medienabfrage
2. CSS -Haltepunkte
3. Minweite
4. Maximale Breite
5. Beide kombinieren
6. Wann zu verwenden, welche: Minwidth oder Max-Breite

Medienabfrage

Medienabfragen wurden in CSS Version 3 eingeführt, mit der seine Benutzer reaktionsschnelle Websites durch die Verwendung der @media -Regel erstellen können. Diese Regel erfordert, dass Sie den Medientyp wie Druck, Bildschirm, Sprache oder alle zusammen mit einigen logischen Ausdrücken angeben, die bestimmte Medienfunktionen wie Breite, Auflösung, Dichte usw. angeben, usw.

Diese Abfragen ermöglichen im Grunde genommen die Änderung des Weblayouts abhängig vom Gerätetyp wie Desktop, Laptop, Handy usw. Hier haben wir Ihnen gezeigt, wie Sie eine Medienfrage definieren können.

Syntax

@media Screen und (Min-Width: 420px) und (max. Width: 650px)
@Regel
Medientyp
Medienfunktion
Medienfunktion
Operator
Operator

Eine Medienabfrage beginnt immer mit der @media -Regel und erfordert, dass Sie den Medientyp angeben, auf den die Abfrage angewendet werden soll. Dann müssen Sie den Bildschirmmedienstyp angeben und Operatoren wie "und" Medienfunktionen wie Minwidth oder Max-Breite verwenden.

Medienabfragen werden an bestimmten Punkten angegeben, die als Abfragebrechpoints in Medien bezeichnet werden. Sehen Sie sich den kommenden Abschnitt an, um sie ausführlich zu lernen.

CSS -Haltepunkte

Breakpoints in CSS werden als Punkte bezeichnet, an denen sich die Struktur einer Website ändert, die der Bildschirmgröße des Gerätetyps entspricht. Breakpoints werden entweder basierend auf dem Gerätetyp oder dem Inhaltstyp entschieden. Einige häufige Haltepunkte sind wie folgt.

1. Für mobile Geräte: 320px bis 480px
2. Für Tablets und iPads: 481px bis 768px
3. Für Laptops: 769px bis 1024px
4. Für Desktops: 1025px bis 1200px

Während Sie die obigen Erklärungen lesen. Sie müssen sich fragen, was diese sind und wann Sie sie verwenden müssen. Im Folgenden haben wir Ihnen alle wesentlichen Details gegeben.

Minweite

Die MIN-Breitenmedienfunktion gibt die minimale Breite eines bestimmten Geräts an. Zum Beispiel haben wir im obigen Abschnitt einige Bildschirmbreiten auf der Grundlage des Gerätetyps wie der minimalen Bildschirmbreite von mobilen Geräten 320px angewendet.

Beispiel

@media Bildschirm und (Min-Width: 600px)
P
Schriftgröße: 16px;

Im obigen Code haben wir angegeben, dass sich die Schriftgröße des Absatzes auf 16px ändert, wenn die minimale Bildschirmbreite 600px oder breiter ist. Daher zeigt jedes Gerät mit dieser Bildschirmbreite den Absatztext in der angegebenen Schriftgröße an.

Maximale Breite

Die MAX-Width Media-Funktion gibt die maximale Breite eines bestimmten Geräts an. Beispielsweise beträgt die maximale Bildschirmbreite von mobilen Geräten 480px. Wenden Sie sich an das folgende Beispiel, um es besser zu verstehen.

Beispiel

@media Bildschirm und (max-Width: 700px)
P
Schriftgröße: 25px;

Der obige Code besagt, dass sich die Schriftgröße des Absatzes auf 25px ändert, wenn die maximale Bildschirmbreite 700px oder weniger beträgt. Jedes Gerät, das diese Bildschirmbreite rendert, zeigt den Absatztext in der angegebenen Schriftgröße an.

Beide kombinieren

Sie können beide Medienfunktionen auch gemeinsam verwenden, indem Sie sie mit dem 'und' Operator kombinieren.

Beispiel

P
Schriftstil: mutig;

@media Screen und (Min-Width: 600px) und (max-Width: 700px)
P
Schriftstil: kursiv;

Der obige Code gibt an, dass, wenn die Bildschirmbreite zwischen 600 und 700 PX liegt.

Wann zu verwenden, welche: Minwidth oder Max-Breite

Wenn Sie Ihre Website zuerst für kleinere Geräte entwerfen, stellen Sie Ihre Standard-CSS-Haltepunkte mit Minwidth ein und passen Sie größere Geräte entsprechend an.

Wenn Sie zuerst für größere Geräte entwerfen, verwenden Sie die maximale Breite und schalten Sie dann für kleinere Geräte entsprechend ein.

Abschluss

Die Min-Breite und die maximale Breite sind Medienfunktionen, die einem bestimmten Medientyp entsprechen, der in der Medienabfrage festgelegt wurde. Die Min-Width gibt die minimale Bildschirmbreite eines bestimmten Geräts an. In der maximalen Breitenmedienfunktion heißt es in der maximalen Bildschirmbreite eines bestimmten Geräts. Wenn Sie Ihre Website zuerst für kleinere Geräte entwerfen, setzen. In diesem Beitrag werden Minwidth- und Max-Width-Medienfunktionen im Detail zusammen mit relevanten Beispielen erläutert.