web-dev-qa-db-fra.com

Masquer l'élément pour mobile uniquement - Interface utilisateur sémantique

J'ai un problème avec le masquage de l'image pour les appareils mobiles. J'utilise le cadre d'interface utilisateur sémantique. Dans la documentation, j'ai trouvé quelques classes:

  1. mobile uniquement - s'affiche uniquement en dessous de 768 pixels
  2. tablette uniquement - s'affiche uniquement entre 768 pixels et 991 pixels
  3. ordinateur uniquement - affichera toujours 992 pixels et plus

Par exemple, j'utilise des cours "informatiques uniquement" pour masquer l'image sur les tablettes et les mobiles, mais le résultat m'a dérouté.

<div class="ui grid stackable">
  <div class="row middle aligned">
    <div class="nine wide column">
      <h1 class="ui header blue">Default Header.</h1>
    </div>
    <div class="seven wide computer only column">
      <img class="ui image" src="http://icons.veryicon.com/png/System/iNiZe/niZe%20%20%20IMG.png" alt="" title="">
    </div>
  </div>
</div>

http://jsfiddle.net/3xkrx/318/

csssemantic-ui
11
WhatIsHTML

Ajouter mobile only grid à img tag

L'expression correcte est ci-dessous:

<img class="ui image mobile only grid " src="http://icons.veryicon.com/png/System/iNiZe/niZe%20%20%20IMG.png" alt="" title="">
7
vignesh

Visitez ici fonctionne très bien

/* Mobile */

@media only screen and (max-width: 767px) {
  [class*="mobile hidden"],
  [class*="tablet only"]:not(.mobile),
  [class*="computer only"]:not(.mobile),
  [class*="large monitor only"]:not(.mobile),
  [class*="widescreen monitor only"]:not(.mobile),
  [class*="or lower hidden"] {
    display: none !important;
  }
}
etc...

https://jsfiddle.net/8LkLoxcx/

4
Achmed Zuzali