केवल मोबाइल के लिए तत्व छुपाएं - सेमेन्टिक यूआई

Question

मुझे मोबाइल उपकरणों के लिए छिपाने वाली छवि के साथ समस्या है। मैं अर्थपूर्ण यूआई ढांचे का उपयोग कर रहा हूँ। दस्तावेज में मैं कुछ वर्गों पाया:

1. मोबाइल केवल - केवल नीचे प्रदर्शित करेगा 768px
2. गोली केवल -
3. 991px कंप्यूटर केवल - - हमेशा 992px और

ऊपर प्रदर्शित करेगा 768px के बीच केवल प्रदर्शित करेगा

बस उदाहरण के लिए, मैं टैबलेट और मोबाइल पर छवि छिपाने के लिए "कंप्यूटर केवल" कक्षाओं का उपयोग कर रहा हूं, लेकिन परिणाम ने मुझे भ्रमित कर दिया।

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

Answer 1

इसके अलावा, मैं एक और समाधान मिल गया। किसी के लिए हो सकता है यह सहायक होगा।

मैंने कक्षाओं में "mobile hidden" कक्षाओं को जोड़ा है जो मैं मोबाइल उपकरणों पर छिपाना चाहता था।

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

Answer 2

जोड़े mobile only gridimg टैग करने के लिए

सही अभिव्यक्ति के नीचे है:

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

Answer 3

जाएँ यहाँ वास्तव में अच्छी तरह से काम करता है

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