2016-07-04 4 views
5

Ich habe ein Problem mit dem Verbergen von Bildern für mobile Geräte. Ich benutze Semantic UI Framework. In der Dokumentation fand ich einige Klassen:Element nur für Handys ausblenden - Semantic UI

  1. Handy nur - zeigt nur unter 768px
  2. Tablette nur - nur 991px
  3. Computer - - wird nur zwischen 768px Anzeige immer 992px angezeigt wird und über

Nur zum Beispiel verwende ich "nur Computer" -Klassen, um das Bild auf Tablets und Handys zu verstecken, aber das Ergebnis verwirrte mich.

<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/

+0

Könnten Sie die Frage klären, bitte? Was ist mit dem Ergebnis verwirrt Sie? – Christopher

Antwort

3

Auch fand ich noch eine Lösung. Kann für jemanden sein, wird es hilfreich sein.

Ich habe die Klassen "mobile hidden" Spalte hinzugefügt, die ich auf mobilen Geräten verstecken wollte.

<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 column mobile hidden"> 
    <img class="ui image" src="http://icons.veryicon.com/png/System/iNiZe/niZe%20%20%20IMG.png" alt="" title=""> 
    </div> 
</div> 

6

hinzufügen mobile only grid zu img Tag

Der richtige Ausdruck ist unten:

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

danke, es funktioniert gut in jsfiddle, aber nicht auf meiner Website arbeiten. Das Bild im Breitbildformat verschwindet einfach, etwas Magisches passiert. Ich habe class = "ui Bild Computer nur Gitter" – WhatIsHTML

+0

das wird angeblich nicht funktionieren, weil es auf dem Tablet zeigen wird – carkod

0

Besuch hier funktioniert wirklich gut

/* 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/