web-dev-qa-db-fra.com

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

Je suis nouveau avec sémantique-UI et j'adore le framework. Ils ont une vaste documentation utile cependant, et plus encore une chose confuse.

Comment fonctionne la visibilité Responsive?

Il y a [tablette uniquement mobile uniquement petit moniteur uniquement grand moniteur uniquement] pour le conteneur ... et une partie du code, j'ai trouvé qu'il y avait [ordinateur uniquement, appareil uniquement]? Quelle est la différence? Merci.

semantic-ui
19
densityx

Mis à jour pour refléter les documents actuels et la version 2.4.2

La visibilité réactive fonctionne en masquant un certain élément (généralement un ui container, mais peut aussi être par exemple lignes de grille) sur des tailles d'écran spécifiques. Par exemple, <div class="ui container mobile only"> ne s'afficherait que lorsque l'écran mesure moins de 768 pixels.

La documentation de Grid a une section Visibilité du périphérique qui montre plusieurs modificateurs de visibilité possibles:

  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. Écran large (widescreen only)
  7. Toutes les tailles (pas de modificateur)

La documentation ne mentionne pas explicitement quels sont les points d'arrêt de l'appareil. Comme la plupart des choses, ils peuvent être configurés via des variables SASS lors de la construction de l'interface utilisateur sémantique et sont définis à l'intérieur site.variables . Les points d'arrêt par défaut sont:

  1. mobile only n'affichera qu'en dessous de 768 px
  2. tablet only n'affichera qu'entre 768px - 991px
  3. computer only affichera toujours 992px et plus
  4. large screen only n'affichera qu'entre 1200px - 1919px
  5. widescreen only n'affichera que 1920 px et plus

Comme indiqué dans la documentation de Grid, il est également possible de les combiner - par exemple tablet mobile only et mobile computer only sont parfaitement valides.

30
fstanis

Cela ne peut pas s'afficher en dessous de 768 px:

<div class="ui container mobile only">

L'expression correcte est ci-dessous:

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