Stiftung CSS Sichtbarkeit
Nach Angaben der Bildschirmgröße der Anzeigeelemente
Die folgenden Klassen werden auf dem Gerät (Bildschirmgröße) mit dem Anzeigeelement basieren.
| Kategorie | Beschreibung |
|---|---|
| .Show-for-small-only | Nur Elemente auf einem kleinen Gerät angezeigt werden (Bildschirmbreite von weniger als 40.0625em) |
| .Show-for-Medium-up | Anzeigeelemente auf dem Medium und über Geräte (Bildschirmbreite, die größer als 40.0625em) |
| .Show-for-Medium-only | Nur auf mittlere Geräteelement (Bildschirmbreite zwischen 40.0625em bis 64.0625em) |
| .Show-for-large-up | In großen Anlagen und mehr Anzeigeelemente (Rasterweite von mehr als 64.0625em) |
| .Show-for-large-only | Wird nur angezeigt, auf großen Ausstattungselement (Bildschirmbreite zwischen 64.0625em bis 90.0625em) |
| .Show-for-xlarge-up | Anzeigeelemente auf dem größeren und mehr Ausrüstung (Bildschirmbreite, die größer als 90.0625em) |
| .Show-for-xlarge-only | Wird nur angezeigt, auf den größeren und Ausstattungselemente (Bildschirmbreite zwischen 90.0625em bis 120.0625em) |
| .Show-for-xxlarge-up | Auf der großen Geräte und mehr Anzeigeelemente (Rasterweite von mehr als 120.0625em) |
Das folgende Beispiel zeigt alle der oben .show- Sichtbarkeit Klasse.
<p class="show-for-small-only">你在小型设备上。</p> <p class="show-for-medium-up">你在中型、大型、更大型、超大型的设备上。</p> <p class="show-for-medium-only">你在中型设备上。</p> <p class="show-for-large-up">你在大型、更大型、超大型的设备上</p> <p class="show-for-large-only">你在大型设备上。</p> <p class="show-for-xlarge-up">你在更大型、超大型的设备上。</p> <p class="show-for-xlarge-only">你在更大型设备上。</p> <p class="show-for-xxlarge-up">你在超大型设备上。</p>
Nach Angaben der Bildschirmgröße versteckte Element
Die folgenden Klassen werden auf dem Gerät (Bildschirmgröße) basieren Elemente zu verbergen.
| Kategorie | Beschreibung |
|---|---|
| .Hide-for-small-only | Nur Elemente auf einem kleinen Gerät verstecken (Bildschirmbreite von weniger als 40.0625em) |
| .Hide-for-Medium-up | Ausblenden Elemente in den mittleren und über Geräte (Bildschirmbreite, die größer als 40.0625em) |
| .Hide-for-Medium-only | Nur Elemente auf einem Midrange-Gerät (Bildschirmbreite zwischen 40.0625em bis 64.0625em) verstecken |
| .Hide-for-large-up | Ausblenden Elemente in großen und mehr Ausrüstung (Bildschirmbreite, die größer als 64.0625em) |
| .Hide-for-large-only | Nur Elemente auf Großgeräte (Bildschirmbreite zwischen 90.0625em bis 64.0625em) verstecken |
| .Hide-for-xlarge-up | In der größeren und mehr Ausrüstung versteckte Element (Bildschirmbreite, die größer als 90.0625em) |
| .Hide-for-xlarge-only | Nur versteckte Element (Bildschirmbreite 90.0625em zwischen 120.0625em) auf dem größeren und Ausrüstung |
| .Hide-for-xxlarge-up | Versteckte Element auf dem großen und mehr Ausrüstung (Bildschirmbreite, die größer als 120.0625em) |
<p class="hide-for-small-only">你不在小型设备上。</p> <p class="hide-for-medium-up">你不在中型、大型、更大型、超大型的设备上。</p> <p class="hide-for-medium-only">你不在中型设备上。</p> <p class="hide-for-large-up">你不在大型、更大型、超大型的设备上。</p> <p class="hide-for-large-only">你不在大型设备上。</p> <p class="hide-for-xlarge-up">你不在更大型、超大型的设备上。</p> <p class="hide-for-xlarge-only">你不在更大型设备上。</p> <p class="hide-for-xxlarge-up">你不在超大型设备上。</p>
Anzeigeelemente entsprechend der Bildschirmausrichtung
Die folgenden Klassen werden auf dem Gerät (Bildschirmgröße) basieren Elemente zu verbergen.
Wir können ein Element in verschiedenen Richtungen eingestellt, ob ein- oder ausblenden. Laptops und andere Desktop-Geräte in der Regel horizontal, sondern Mobiltelefone und Tablet-Geräte können horizontal oder vertikal sein, können wir uns verstecken und das Element Anzeige gemäß dem Mobiltelefon des Benutzers Richtungen zu bekommen:
| Kategorie | Beschreibung |
|---|---|
| .Show-for-Landschaft | Anzeigeelemente in Quer (Längs verstecken) |
| .Show-for-Porträt | Anzeigeelemente (seitlich verdeckt) im Hochformat |
Das folgende Beispiel zeigt den Inhalt des Textes entsprechend der Richtung der Anwendung:
Beispiele
<P class = "show-für -portrait"> Text nur im Portrait. </ P>
Versuchen »
Touch-Screen-Display-Gerät und verstecken
Sie können je nachdem, ob das Gerät unterstützt Touch versteckte Element angezeigt werden soll.
| Kategorie | Beschreibung |
|---|---|
| .Show-for-Touch | Angezeigt auf einem Touch-Screen-Geräteunterstützung (nicht auf Geräten unterstützt versteckt) |
| .Hide-for-Touch | Zur Unterstützung Touch-Geräten versteckt (nicht auf unterstützten Geräten angezeigt) |
Die folgenden Beispiele nach, ob das Gerät unterstützt Touch den Text anzuzeigen:
Beispiele
<P class = "hide-für -Touch"> Ihr Gerät nicht unterstützt Touch - Screen. </ P>