Lequel est le bon? Interface utilisateur sémantique: visibilité adaptative

Je suis de nouveau avec la sémantique de l'INTERFACE utilisateur et j'adore avec le cadre. Ils ont de vastes de la documentation utile, cependant, et plus si confus chose.

Comment le Sensible visibilité travail?

Il y a le [mobile tablette seulement petit moniteur grand écran seulement] pour le conteneur... et une partie du code, j'ai trouvé qu'il y avait [seul ordinateur, appareil uniquement] ? Quelles sont les différences? merci.

source d'informationauteur densityx

  1. 25

    Jour afin de refléter les docs et la version 2.3.0

    Sensible de la Visibilité des œuvres de cacher un certain élément (généralement un ui containermais peut aussi être par exemple des lignes de la grille) sur des tailles d'écran. Par exemple, <div class="ui container mobile only"> ne sera indiquée que lorsque l'écran est inférieure à 768px de large.

    La documentation de la Grille a un Visibilité De L'Appareil article qui démontre plusieurs modificateurs de visibilité:

    1. Mobile (mobile only)
    2. Tablette (tablet only)
    3. Tablette et Mobile (tablet mobile only)
    4. Ordinateur (computer only)
    5. Grand écran (large screen only)
    6. Grand écran (widescreen only)
    7. Toutes les Tailles (pas de modificateur)

    La documentation n'est pas explicitement mention de ce que le dispositif d'arrêt n'est, mais en inspectant le code rapidement révèle. Basé sur le version actuelle sur GitHub:

    1. mobile only affichera uniquement ci-dessous 768px
    2. tablet only affichera uniquement entre 768px - 991px
    3. computer only affiche toujours 992px et au-dessus de
    4. large screen only affichera uniquement entre 1200px - 1919px
    5. widescreen only affichera uniquement 1920px et au-dessus de

    Comme on le voit dans la documentation de la Grille, il est possible de combiner ces ainsi - par exemple tablet mobile only et mobile computer only sont parfaitement valides.

  2. 1

    Ce ne peut pas afficher ci-dessous 768px:

    <div class="ui container mobile only">

    L'expression correcte est ci-dessous:

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