Fondazione visibilità CSS
Secondo le dimensioni dello schermo di elementi di visualizzazione
Le seguenti classi saranno basati sul dispositivo (dimensioni dello schermo) per l'elemento di visualizzazione.
| categoria | descrizione |
|---|---|
| .Show-per-small-only | mostra solo gli elementi su un piccolo dispositivo (schermo larghezza inferiore 40.0625em) |
| .Show-per-media-up | Elementi di visualizzazione sui dispositivi media e superiore (larghezza superiore dello schermo di 40.0625em) |
| .Show-per-medio-only | Mostra solo sul dispositivo elemento di medie dimensioni (larghezza dello schermo tra 40.0625em a 64.0625em) |
| .Show-per-grande-up | In grandi attrezzature e altri elementi di visualizzazione (schermo di larghezza superiore a 64.0625em) |
| .Show-per-grande-only | Solo visualizzate sul grande elemento di attrezzature (larghezza dello schermo tra 64.0625em a 90.0625em) |
| .Show-per-XLarge-up | Elementi di indicazione sulle attrezzature più grande e più (schermo di larghezza superiore a 90.0625em) |
| .Show-per-XLarge-only | Solo visualizzate sugli elementi attrezzature più grandi e più (larghezza dello schermo tra 90.0625em a 120.0625em) |
| .Show-per-XXLarge-up | Sul grande attrezzature e altri elementi di visualizzazione (larghezza superiore dello schermo di 120.0625em) |
L'esempio seguente mostra tutto quanto sopra .show- classe di visibilità.
<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>
Secondo l'elemento nascosto dimensione dello schermo
Le seguenti classi saranno basati sul dispositivo (dimensioni dello schermo) per nascondere gli elementi.
| categoria | descrizione |
|---|---|
| .nascosto-per-small-only | nascondere Solo elementi su un piccolo dispositivo (schermo larghezza inferiore 40.0625em) |
| .nascosto-per-media-up | Nascondere elementi nei dispositivi media e superiore (larghezza superiore dello schermo di 40.0625em) |
| .nascosto-per-medio-only | Solo nascondere gli elementi su un dispositivo di fascia media (larghezza dello schermo tra 40.0625em a 64.0625em) |
| .nascosto-per-grande-up | Nascondere elementi in grandi e più attrezzature (larghezza superiore dello schermo di 64.0625em) |
| .nascosto-per-grande-only | Solo nascondere gli elementi su grandi attrezzature (larghezza dello schermo tra 90.0625em a 64.0625em) |
| .nascosto-per-XLarge-up | Nella elemento nascosto più grande e attrezzature (schermo di larghezza superiore a 90.0625em) |
| .nascosto-per-XLarge-only | Solo elemento nascosto (larghezza dello schermo 90.0625em tra 120.0625em) sulle attrezzature più grande e più |
| .nascosto-per-XXLarge-up | elemento nascosto sul grande e più attrezzature (schermo di larghezza superiore a 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>
Elementi di visualizzazione in base al l'orientamento dello schermo
Le seguenti classi saranno basati sul dispositivo (dimensioni dello schermo) per nascondere gli elementi.
Siamo in grado di impostare un elemento in direzioni diverse, se mostrare o nascondere. Computer portatili e altri dispositivi desktop generalmente orizzontali, ma telefoni cellulari e dispositivi tablet possono essere orizzontali o verticali, siamo in grado di nascondere e visualizzare l'elemento in base al telefono cellulare dell'utente per ottenere indicazioni:
| categoria | descrizione |
|---|---|
| .Show-per-paesaggio | Elementi di visualizzazione in senso trasversale (nascondere longitudinale) |
| .Show-per-ritratto | Elementi di visualizzazione (laterale nascosto) in orientamento verticale |
L'esempio seguente mostra il contenuto del testo in base alla direzione di utilizzo:
Esempi
<P class = "show-per -Ritratto"> Solo testo in verticale. </ P>
Prova »
dispositivo di display touch-screen e nascondere
È possibile a seconda che il dispositivo supporta tocco per visualizzare elemento nascosto.
| categoria | descrizione |
|---|---|
| .Show-per-touch | Visualizzato su un supporto dispositivo touch screen (non supportato su dispositivi nascosti) |
| .nascosto-per-touch | In dispositivi touch di supporto nascosti (non visualizzato su dispositivi supportati) |
Gli esempi che seguono a seconda che il dispositivo supporta tocco per visualizzare il testo:
Esempi
<P class = "nascondere-per -touch"> Il dispositivo non supporta touch screen. </ P>