Qual è quello giusto? Interfaccia utente semantica: Visive Visibility

Question

Sono nuovo con l'interfaccia semantica e mi piace con il framework. Hanno una vasta documentazione utile, e molto più confusa.

Come funziona la visibilità Responsive?

Ci sono [solo tablet portatili solo monitor di piccole dimensioni solo per monitor di grandi dimensioni] per il contenitore ... e parte del codice, ho trovato che c'era solo [solo computer, solo dispositivo]? Quali sono le differenze? grazie.

Answer 1

aggiornata per riflettere documenti correnti e versione 2.3.0

opere visibilità Responsive nascondendo un certo elemento (di solito un ui container, ma può anche essere ad esempio righe griglia) su schermi di dimensioni specifiche. Ad esempio, <div class="ui container mobile only"> verrà visualizzato solo quando lo schermo è largo meno di 768 pixel.

La documentazione per griglia ha una sezione Device Visibility che dimostra diverse possibili modificatori di visibilità:

1. mobile (mobile only)
2. Tablet (tablet only)
3. Tablet e Mobile (tablet mobile only)
4. Computer (computer only)
5. Grande schermo (large screen only)
6. Widescreen (widescreen only)
7. Tutte le dimensioni (senza modificatore)

La documentazione non esplicitamente menziona quali sono i punti di interruzione del dispositivo sono, ma ispezionando il codice rapidamente rivela. Basato sul current version su GitHub:

1. mobile only visualizzerà solo sotto 768px
2. tablet only visualizzerà solo tra 768px - 991px
3. computer only sarà sempre visualizzare 992px e soprattutto
4. large screen only visualizzerà solo tra 1200px - 1919px
5. widescreen only visualizzerà solo 1920px e soprattutto

Come si è visto nella documentazione per la griglia, è possibile combinare questi pure - per esempio tablet mobile only e mobile computer only sono perfettamente validi.

Answer 2

<div class="ui container mobile only"> 

Questo non può visualizzare sotto 768px.

L'espressione corretta è qui sotto:

<div class="ui container mobile only grid">