Fassen Sie die Verwendung der Attribute „Mindestbreite min-width' und „Maximalbreite max-width' in CSS zusammen

Das CSS-Breitenattribut ist die Wortbreite, und die Breitenbreite umfasst zwei wichtige Attribute: das maximale Breitenattribut „max-width“ und das minimale Breitenattribut „min-width“. Das max-width-Attribut (max-width) wird verwendet, um den maximalen Wert der Breitenanzeige zu definieren. Wenn der Browserrahmen gezogen wird, um den Anzeigebereich größer als die maximale Breite zu machen, wird das -Element verwendet Zeigt die durch den maximalen Breitenwert definierte Breite an. Im Attributwert „Maximale Breite“ können drei Attributwerte verwendet werden, nämlich der automatische Wert, der Längenwert und der Prozentwert. Das Attribut „Mindestbreite“ (Min-Breite) wird verwendet, um den Mindestwert der Breite zu definieren Wenn der Browserrahmen verschoben wird, um den Anzeigebereich kleiner als die Mindestbreite zu machen, zeigt das Element die Breite an, die durch den Mindestbreitenwert definiert ist, drei Attributwerte können verwendet werden, nämlich Autowert, Längenwert und Prozentwert. In diesem Artikel wird die Verwendung der beiden Attribute max-width und min-width zusammengefasst.

Verwendung von Attributen für minimale und maximale Breite1.

Kompatibel mit der Mindestbreite und -höhe von IE6

Wenn eine Website im Breitbildformat ist und Sie das Browserfenster nach links oder rechts ziehen, ändert sich die Breite der Website mit der Größe des Fensters. und das Browserfenster Nachdem die Breite bis zu einem gewissen Grad reduziert wurde, wird die Bildlaufleiste unten angezeigt und die Breite der Website wird nicht mehr reduziert. Wir wissen, dass diese einfache Funktion mit der minimalen Breite von CSS leicht erreicht werden kann Leider unterstützt der IE6, der viele Benutzer hat, dieses sehr praktische Attribut nicht. Was müssen wir beim Entwerfen der Webseite nur hinzufügen, um das Problem zu lösen?

2.

Erklären Sie im Detail die Beziehung und Verwendung zwischen dem @media-Attribut und (max-width:) und (min-width)

width/height definiert das Ausgabegerät Die sichtbare Bereichsbreite/Höhe der Seite.

max/min-width/height definiert die maximale/minimale sichtbare Bereichsbreite/Höhe der Seite im Ausgabegerät.

Gerätebreite/-höhe definiert die sichtbare Bildschirmbreite/-höhe des Ausgabegeräts.

max/min-device-width/height definiert die maximale/minimale sichtbare Breite/Höhe des Bildschirms des Ausgabegeräts.

3.

CSS-Layout-Studiennotizen – maximale Breite

Das Festlegen der Breite eines Elements auf Blockebene kann verhindern, dass es den Container von links nach rechts füllt. Anschließend können Sie den linken und rechten Rand auf „Automatisch“ einstellen, um ihn horizontal zu zentrieren. Das Element nimmt die von Ihnen angegebene Breite ein und die verbleibende Breite wird dann in zwei linke und rechte Ränder aufgeteilt.

Das einzige Problem besteht darin, dass der Browser eine horizontale Bildlaufleiste anzeigt, um die Seite anzupassen, wenn das Browserfenster schmaler als die Breite des Elements ist.

Die Verwendung von max-width anstelle von width ermöglicht es dem Browser in diesem Fall, mit kleinen Fenstersituationen besser umzugehen.

4.

jquery implementiert die Bildskalierung und die maximale Breite ist im IE nicht kompatibel.

wird verarbeitet Beim Laden von Bildern auf Webseiten ist es insbesondere in einigen Bildlistenanwendungen schwierig, sicherzustellen, dass die Bilder eine einheitliche Größe haben. Das direkte Festlegen der Bildgröße führt dazu, dass das Bild gestreckt und unscharf wird Passen Sie die Bildgröße proportional an, nachdem das Bild geladen wurde. Max-width und max-height sind in ie6 nicht kompatibel. Diese Probleme können mit jQuery gelöst werden.

5.

Lassen Sie IE6 die minimale Breite unterstützen

Ich glaube, dass viele Leute diese Methode verwenden, um dies zu erreichen Bei der kleinsten Containergröße kommt es oft zu unerklärlichen Abstürzen. Es gibt zwei Punkte, auf die hingewiesen werden muss: 1. Die Elemente, die das Ansichtsfenster im Standardmodus und im Quirk-Modus darstellen, sind unterschiedlich. , und letzteres Dann ist es ;

Verwandte Fragen und Antworten1.

@media screen und (min-width:800px)

2.

Fragen Sie, was der Unterschied zwischen max-width und max-device-width ist

3

Über die ungültige max-width von CSS

[Verwandte Empfehlungen]

1. PHP-Eintrag auf chinesischer Website:

Mindestbreite

2. PHP-Eintrag für chinesische Website: max-width

3. PHP-Video-Tutorial für chinesische Website:

Das obige ist der detaillierte Inhalt vonFassen Sie die Verwendung der Attribute „Mindestbreite min-width' und „Maximalbreite max-width' in CSS zusammen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!