CSS-Assistenteneinheiten: Schnellstart. EM-Messeinheit Power in CSS

Die CSS3 fügte neue relative Maßeinheiten wie VH, VW, VMIN, Vmax hinzu. Diese Einheiten werden relativ zur Größe des Browserfensters berechnet. Zum desktop-Computer Die Breite des Browserfensters ist größer als die Breite des Ansichtsbereichs (die Bildlaufleiste wird hinzugefügt). Wenn Sie also die Breite 100VW für das Element einstellen, wird es über HTML hinausgehen.

Feige. 1. Full-Screen-Hintergrundbild mit 100VW-Breite

Browser unterstützen.

Dh: 9.0 Verwenden Sie zusätzlich zu VMAX VM anstelle von VMIN
KANTE: 12.0 Verwenden Sie zusätzlich zu VMAX VM anstelle von VMIN
Feuerfuchs: 19.0
Chrom: 26.0
Oper: 15.0
Safari: 6.1
iOS-Safari: 8.0
Android: 4.4
Chrom. für Android: 55.0

1. Einheiten VH und VW

Bäume sich anpassendes Webdesign Basierend auf der Verwendung von Zinsenwerten. Das Interesse ist jedoch für jeden Fall weit von einer besseren Lösung, da sie relativ zur Größe des nächstgelegenen Elternelements berechnet werden. Wenn Sie die Höhe und Breite des Browserfensters verwenden möchten, ist es daher besser, VH- und VW-Einheiten zu verwenden. Wenn beispielsweise die Höhe des Browserfensters 900px beträgt, dann ist 1VH 9px. Wenn die Breite des Browserfensters 1600px beträgt, ist 1VW gleich 16px.

1.1. Adaptive-Vollbild-Hintergrundbild

Da die Breite des Elements, das mit 100VW mehr Breite des Betrachtungsbereichs angegeben ist, um Vollbild-Hintergrundbilder zu erstellen, ist es besser, eine 100% ige Breite zu verwenden, die gleich der Breite des HTML-Wurzelelements ist.

Fullscreen-BG (image.jpg); Hintergrundposition: Mitte; Hintergrundgröße: Abdeckung; Breite: 100%; Höhe: 100VH;) Feige. 2. Adoptives Hintergrund des vollständigen Bildschirms

1.2. Der Effekt der Vollseiten-Folie

Um einen Block auf der gesamten Höhe des Browserfensters herzustellen, müssen Sie die Höhe einstellen: 100%; Für drei Elemente - HTML, Körper und direkt für den Block selbst:

HTML, Körper (Höhe: 100%;) Abschnitt (Höhe: 100%;)

Da prozentuale Größen relativ zu den Werten der übergeordneten Elemente berechnet werden, ist es erforderlich, die entsprechenden Werte für jedes DOM-Element festzulegen. Die VH-Messeinheit erfordert nicht die Installation der Werte an der Kette, da der Wert direkt relativ zum Browserfenster berechnet wird:

Abschnitt (Höhe: 100VH;)

Der Effekt der Klettern der Folien beim Klicken auf den Pfeil wird mit einem kleinen JQuery-Skript implementiert:

JQuery (Dokument) .Ready (Funktion ($) ("NAV"). EIN ("Klicken Sie auf", Funktion () (falls ($ ($ ($ ($ ($ ($ (this) .hasclass ("Down")) (Var MovePOS \u003d $ (Fenster). scolleTop () + $ (Fenster) .höhe ();), if ($ (this) .hasclass ("top")) (Var MovePos \u003d $ (Fenster) .ScollTop () - $ (Fenster) .hicht (); ) $ ("HTML, Körper"). Animate ((Scrollltop: MovePos), 600);););););););););););

Die von VH angegebene Höhe kann auch verwendet werden, um das Element in der Mitte der Seite auszurichten.

16. Juni 2011 um 10:49 Uhr

Welche Maßeinheiten wählen Sie beim Layout?

• CSS.

In meiner Vergangenheit habe ich die Messeinheiten beeinflusst und sofort in den Kommentaren an diesem Thema-Streitigkeiten und -diskussionen begonnen, also entschied ich mich, dieses Problem in einem separaten Beitrag zu erstellen. Jetzt und diskutiere :)

Längeneinheiten sind zwei Kategorien: absolutund relativ. ZU absolut sich beziehen:

• zoll (in)
• santimeter (cm)
• millimeter (mm)
• punkte (PT)
• peaks (PC)

In Bezug auf die Spezifikation CSS 1PT \u003d 1/72in und 1pc \u003d 12pt.
In der Eigenschaft Schriftgröße, die Aufgabe eines negativen Werts in Längeneinheiten, beispielsweise -25cm, inakzeptabel.
Warum absolut? Weil sie in der physischen Welt ein echter Wert sind, dh normen.
Mit solchen Einheiten funktioniert das Ausgabegerät, das beispielsweise eine echte physische Größe aufweist, zum Beispiel: Beim Drucken verwenden wir solche Einheiten.
Aber für Monitore haben diese Einheiten keine Bedeutung, es gibt einige Konditionalitätaber es ist nur gültig konventionalität.
ZU relativeinheiten umfassen:

• em (Leiter)
• x-höhe (ex)
• pX (Pixel)

Interesse (%) ist immer die Größe, deren es sich lohnt, separat zu sagen. Es ist so wichtig, dass der W3C es in einer separaten Spalte machte. IE% können nicht von allen Regeln schreiben, aber für einige und wenn wir% schreiben, müssen wir verstehen, was sie berücksichtigen.
Pixel ist der kleinste Punkt, der auf dem Computerbildschirm installiert werden kann.
Warum Pixel. relativgröße? Wir nehmen physisch Monitor, der eine Diagonale hat, ist echt physikalische Größe. Aber wir können die Erlaubnis darauf einsetzen jemand, Recht? Abhängig von der von uns eingestellten Berechtigung kann der Pixelwert variieren. Deshalb pixel - relativwert. Dh auf verschiedenen px-Monitoren hat eine andere Größe.
Das Gerät ergibt sich auf die Größe einer Standardschriftart, die in den globalen Browserparametern installiert ist.

Auf der Tischbezeichnung der einzelnen wichtigen Schriftgröße. Die meisten von ihnen sind für uns nicht nützlich, aber einige müssen wissen.
Unter der Nummer 4 ist die Basislinie der Schriftartikel angegeben, und unter der Nummer 13 - Schriftgröße, em. Also ist sie eine Schriftgröße, die von der Höhe bestimmt wird großbuchstabe und die Größe der entfernten Elemente oben und unten (diakritische Zeichen können beispielsweise oben erscheinen, zum Beispiel: E. oder j.).
Und was ist Ex? Dies ist die Höhe des Kleinbuchstabens. Unter der Nummer 3 in der Tabelle und geschrieben. Für verschiedene Schriftarten hat dieses Verhältnis unterschiedlich. Aber nicht alle Browsern unterstützen ein solches Verhältnis.
Zum Beispiel: Microsoft schlug vor, 1EM \u003d 2EX für alle Arten von Schriftarten zu lesen. Es ist wegen der Tatsache, dass Ex in verschiedene Browser kann anders sein, besser in seiner Arbeit verwende nicht. Einige Browser berücksichtigen wirklich extra richtig und einige als dh die Hälfte von em. Und in Wirklichkeit kann es 0,46 sein, auf kleinen Schriftarten, die eine solche Nichtkonformität nicht wahrnehmbar ist, und es wird ein erheblicher Unterschied in großem Unterschied geben.
Nun zur Verwendung auf PT, PC, in Websites.
Wenn wir das Element auf der Website in PT zeigen, wird es noch von etwas genommen. Wie löst der Browser dieses Problem?
Bei der Beginn der Entwicklung computerausrüstungDie Abmessungen der Monitore waren kleine Reichweite. Und Microsoft schlug vor, 96px \u003d 1 Zoll für die Definition zu nehmen, und wir werden die Auflösung unserer Geräte haben.
1in \u003d 96px.
Und Apple sagte nein :) Lass uns auf das Drucken konzentrieren und annehmen:
1in \u003d 72pt.
In der Praxis stellte sich jedoch das Folgende heraus: Je kleiner die Erlaubnis, desto geringer ist die Gelegenheit, die Informationen dort zu platzieren.
Also änderte Apple seinen Geist und machte 1in \u003d 96px, aber es ist alles komplett unsinnDa die eigentliche physische Auflösung Ihrer Geräte etwa 60 bis 600 px / in reicht.
Der Stand 96 bestimmt jedoch, dass er neu berechnet wird. Das bedeutet, dass, wenn Sie eine Größe von 10pt schreiben, der Browser Folgendes: 96/72 * 10. Dies ist die Geschichte, wenn Sie PT in px neu berechnen.
In der Praxis, I. ich berate nicht auf Monitore-Nutzung. absolut Einheiten. Auf den Monitoren spielt es überhaupt keine Rolle, aber es ist wünschenswert, wenn sie drucken, nur dass sie sie benutzen. Wenn Sie drucken, müssen Sie darauf achten, dass alles in PT angezeigt wird.

CSS-Messgeräte werden verwendet, um den Wert in verschiedenen Eigenschaften anzuzeigen. Sie sind in absolut und relativ unterteilt.

Absolute Einheiten

Absolute Messgeräte umfassen Zentimeter (cm), Millimeter (mm) und Zoll (in). Trotz der Tatsache, dass sie für dieselbe Anzeige von Elementen auf einer Webseite vorgesehen sind, berechnen der Browser die physische Größe des Displays oder des Monitors nicht immer, so weiter verschiedene Geräte Elemente können unterschiedliche Größen aufweisen.

Ein-cm (Schriftgröße: 1 cm;). Ein-mm (Schriftgröße: 1 mm;). Ein-in (Schriftgröße: 1in;)

Normalerweise werden diese Messeinheiten verwendet, wenn sie die Größe angeben, um den Seitendruck auszugeben.

Typografische Einheiten

Typografische Messgeräte umfassen Punkte (PT) und Peaks (PC). Punkt (1pt) hat eine feste Größe von 1/72 Zoll, während der Peak (1 pc) 1/6 Zoll (1pc \u003d 12pt) ist. Diese beiden Messeinheiten sind am nützlichsten in Stilen, die für gedruckte Versionen von Dokumenten geschrieben wurden, und nicht für Bildschirme.

Ein Punkt (Schriftgröße: 1pt;) .one-pica (Schriftgröße: 1pc;)

Relative Einheiten

Relative Maßeinheiten umfassen Pixel (PX) und Zinsen (%). Der Prozentsatz ist eine Maßeinheit, die keine Einstellung zur Schriftgröße im Element oder der Größe des Elements selbst hat. Der Wert des als Prozentsatzsatzsatzeinsatzes ist direkt von der Größe desselben Eigenschaftssatzes für das übergeordnete Element abhängig. Beispielsweise wird die Schriftgröße relativ zu der Größe der Schriftart des übergeordneten Elements eingestellt, auch Höhe und Breite wird in Bezug auf die Höhe und Breite des Inhalts des übergeordneten Elements als Prozentsatz in Bezug auf die Höhe und Breite des Inhalts des übergeordneten Elements ausgedrückt.

Ein-Pixel (Schriftgröße: 1px;). Ein-Prozent (Schriftgröße: 1%;)

Pixel - ein Punkt, der einem physischen Pixel auf dem Bildschirm entspricht. Browser berechnen jedoch nicht immer die Größe des Sichtbereichs in Pixel genau.

Erwägen neueste Modelle Laptops, Tabletten und Smartphones, die mit hochauflösenden Bildschirmen ausgestattet sind. An solchen Geräten korreliert der Browser das PX-Gerät nicht mit der Anzahl der physischen Pixel auf dem Bildschirm. Stattdessen normalisiert es das Gerät PX, um die Betrachtungseigenschaften mit einer Pixeldichte um 96 bis 120 Pixel / Zoll auf den herkömmlichen Desktop-Monitor zu bringen. Infolgedessen kann das Quadrat mit einer Seite von 10px von einem Browser auf dem Smartphone gezeichnet werden, so dass auf jeder Seite 15 bis 20 physikalische Pixel beträgt. Dies bedeutet, dass sich PX auch als relative Messeinheit herausstellt.

Schriftabhängige relative Einheiten

Zwei zusätzliche relative Messeinheiten der Messeinheiten sind em und ex. EM ist die Höhe der aktuellen Schriftart, Ex - die Höhe des Symbols "x" im Kleinbuchstaben der angegebenen Schriftart.

One-Ex (Schriftgröße: 1Ex;) .One-em (Schriftgröße: 1EM;)

Wie das Interesse ist EM eine gemeinsame Maßeinheit, die häufig verwendet wird, um die Schriftgröße für Text auf einer Webseite festzulegen.

In CSS3 wurden zwei zusätzliche Messeinheiten eingeführt: REM und CH. REM - Wurzelelement Schriftgröße ( ), Kann es anstelle von EM verwendet werden, um den Einfluss der Schriftgröße des Elternteils oder Vorfahren auf die Schriftgröße des aktuellen Elements zu verhindern.

One-REM (Schriftgröße: 1REM;)

CH-Einheit ist gleich der Breite des Symbols Null (0) der Schriftart des Elements. Seine Verwendung kann nützlich sein, um die Breite des Felds zu bestimmen, das den Text enthält, da die 1CH ungefähr einem Zeichen entspricht.

CH-Einheit wird nur in Chrome 27+, Firefox 19+ und IE9 unterstützt. REM wird in Chrome 4+, Firefox 3.6+, IE9 +, Safari 4.1+ und Opera 11.6+ unterstützt.

Einheiten-Sichtbereich.

Die Messeinheiten des Sichtbereichs umfassen VW (Breite) und VH (Höhe), sodass die Elemente relativ zum Betrachtungsbereich skaliert werden können, dh der sichtbare Teil der Webseite.

Breite: 50VW; / * 50% der Breite des Betrachtungsbereichs * / Höhe: 25VH; / * 25% aus der Höhe des Betrachtungsbereichs * /

Zwei zusätzliche Einheiten sind VMIN und Vmax, die die minimale oder maximale Größe des Sichtbereichs einstellen.

Breite: 1Vmin; / * 1VH oder 1VW, abhängig von der Tatsache, dass weniger * / Höhe: 1VMAX; / * 1VH oder 1VW, je nachdem, was mehr * /

Maßeinheiten relativer Betrachtungsbereiche werden in Chrome 26+, Firefox 19+, IE11 +, Safari 6.1+ und Oper 15+ unterstützt.

Einheitenwerte messen

Werte müssen nicht als Ganzzahlen angegeben werden, sie können auch durch die Dezimalfraktion angezeigt werden. Einige Eigenschaften ermöglichen es auch, negative Werte als Werte anzugeben.

P (Schriftgröße: 0.394in;) / * Dezimalfraktion * / P (Marge: -1px;) / * Negativer Wert * /

Bitte beachten Sie, dass die Anzeige nicht funktioniert, wenn ein Leerzeichen vor einer Messeinheit vorhanden ist oder wenn die Geräteinheit nicht angegeben ist (mit Ausnahme des Nullwerts). Wenn Null als Wert verwendet wird, kann die Anzeige der Messeinheit weggelassen werden.

P (Schriftgröße: 1Ex;) / * Richtig * / P (Schriftgröße: 0;) / * Richtig * / P (Schriftgröße: 0ex;) / * Richtig * / P (Schriftgröße: 1 ex ;) / * Falsch * / P (Schriftgröße: 1;) / * Falsch * /

Wenn CSS AD einen Fehler enthält, wird es vom Browser ignoriert, während der Rest der Ankündigung weiter funktioniert.

In CSS3 erschienen neue Maßeinheiten. (Ich scheine schon darüber gesprochen zu haben. enge) Sie haben bereits von PX, PT, EM und New REM gehört. Betrachten wir mehr mehr: VW und VH.

Oft im Layout gibt es Elemente, die garantiert in das Geschäft des Browsers passen. Im Allgemeinen wird Javascript dafür verwendet. Überprüfen Sie die Größe des Exports und ändern Sie die Größe der Elemente entsprechend. Wenn der Benutzer die Größe des Browserfensters ändert, wird das Verfahren wiederholt.

Mit VW / VH können wir die Größe der Elemente relativ zur Größe des Vioports einstellen. VW / VH-Einheiten sind interessant, wenn 1VW eine Einheit ist, die der Breite der Breite von 1/100 "ist. Um ein Breitelement gleich der Breite der Breite zuzuordnen, müssen Sie beispielsweise Breite installieren: 100VW.

Wie kann es verwendet werden?

Leuchtkasten sind ein wunderbarer Kandidat für die Verwendung von VW und VH, da es in der Regel relativ zum Ansichtsfenster positioniert ist. Es scheint mir jedoch, dass die Position: Mit den oberen, unteren, linken und rechten Wert fixiert, sind einfacher zu bedienen, wie Sie Kann keine Höhe und Breite installieren.

Sie können neue Maßeinheiten verwenden, um die Größen der Elemente einzustellen, die sich im normalen Strom befinden. Zum Beispiel kann ich Screenshots auf der Seite aufnehmen. Die Höhe dieser Screenshots sollte die Veewor-Höhe nicht überschreiten. Dazu kann ich die maximale Bildhöhe einstellen:

Img (max-höhe: 95 vh;)

In diesem Fall stellte ich die Höhe von 95 VRH ein, um einen kleinen Raum zu hinterlassen, wenn sie auf dem Bildschirm sind.

Browser unterstützen.

Wenn das REM von fast allen wichtigen Browsern unterstützt wird, einschließlich IE9, dann, um VW und VH zu warten, warten Sie. Im Moment werden sie nur unterstützt Internet Explorer. 9.

Grüße, lieber Blog-Readers Webcodius! Um die Größe verschiedener Elemente festzulegen hTML-SeitenIn CSS gibt es Einheiten der Messung. Darüber hinaus können sowohl relative als auch absolute Einheiten verwendet werden.

Absolute Einheiten mit der physischen Welt verbunden und hängen nicht von dem Ausgabegerät ab. Für ihre Anweisungen können Sie folgende Einheiten verwenden:

Absolute Einheiten werden weniger als relativ verwendet und gelten hauptsächlich auf, um die Größe des Textes einzustellen. Um die Größe des Textes anzuzeigen, wird hauptsächlich verwendet (PT), was durch Teilen eines Zolls um 72 Teile erhalten wird. Inch ist wiederum ungefähr 25,4 Millimeter beträgt, ein Absatz ist ungefähr gleich einem Drittel eines Millimeters. Ein Beispiel für die Verwendung von absoluten Messeinheiten:

Größe 12 Millimeter

Größe 1 Zentimeter

Größe 1 Zoll

Größe 24 Punkte

Wähle Größe 1 an

Relative Maßeinheiten

Um Informationen auf dem Monitor anzuzeigen, ist es besser, relative Messeinheiten zu verwenden. Da die physikalische Größe der Punkte (Pixel) Bilder auf dem Monitor bildet, können je nach Art und physikalischer Größe dieses Monitors selbst unterschiedlich sein. Die Pixelgröße hängt auch von der installierten Bildschirmauflösung ab. Hauptrelateinheiten:

1 px in cssWie wir bereits oben gesprochen haben, ist es ein Punkt auf dem Benutzerbildschirm, dessen physikalischer Wert von der Auflösung des Geräts abhängt, und wie lange die Person auf seine Oberfläche betrachtet.
Bei der Angabe von Prozentsatz wird die Größe in Abhängigkeit von der Größe des übergeordneten Elements berechnet. Wenn zum Beispiel beispielsweise die Breite des übergeordneten Elements 500px beträgt, wird dann bei der Angabe der Breite: 50% ige Elementbreite 250px betragen.

em. An die Größe der in dem Standardbrowser angegebenen Schriftart oder der Größe der Schriftart des übergeordneten Elements angeschlossen. ABER eX. Dies ist die Höhe des Kapitals (kleiner) Buchstaben "x" (x) in der lateinischen Layout. Das heißt, em ist auch an die in dem Standardbrowser angegebene Schriftgröße gebunden, die im Standardbrowser oder der Schriftgröße des übergeordneten Elements angegeben ist. Beispiele:

Größe 20 Pixel

Größe 150%

Größe 2 em.

Größe 2 ex.

Ergebnis:

Zusätzlich zu den oben genannten gibt es eine Gruppe relativer Einheiten, die an der Größe des Browser-Suchbereichs angeschlossen ist:

Beispiele für die Verwendung:

Größe 2 VW.

Größe 2 VH.

Größe 2 Vmin.

Größe 2 vmax.

Calc () Funktion

Verwendet, um den berechneten Wert anzugeben cSS-Eigenschaften.was als Wert beliebig beliebig verwendet wird. Zunächst kann Calc verwendet werden, um die Größe, das Verbrechen, die Zeit zu berechnen. Darüber hinaus können Sie mit der Funktion unterschiedliche Messeinheiten mischen, beispielsweise die Breite von DIV-A, wie folgt, wie folgt eingestellt werden kann:

div (
Breite: Calc (100% - 40px);
}

In diesem Fall wird die Breite des Div-A gleich der Breite des Elternelements minus 40 Pixel sein.

In Ausdrücke können Sie die folgende arithmetische Aktion verwenden:

• + - Zusatz. Das Symbol wird auf beiden Seiten durch Leerzeichen getrennt (Höhe: calc (20% + 50px));
• - - Subtraktion. Das Symbol wird von beiden Seiten von Leerzeichen getrennt (Breite: Calc (90% - 10px););
• * - Multiplikation (Polsterung: Calc (2EM * 2);););
• / - Einteilung. Auf Null-Divide ist verboten (Breite: Calc (100% / 4);).

IM browser Firefox. Vor der Version 16.0 wird die Funktion -Moz-Calc-Funktion unterstützt, in Chrome auf Version 26.0 und in Safari von Version 6.0 wird von -webkit-calc unterstützt.

Beispielsweise müssen wir einen 50px-Abstand zwischen den Lautsprechern an jeder Seite des Browsers zwischen den Säulen erstellen. Dann mit Hilfe calc-Funktionen Dies geschieht wie folgt: