Chỉ ẩn phần tử cho thiết bị di động - Giao diện người dùng ngữ nghĩa

Question

Tôi gặp vấn đề với việc ẩn hình ảnh cho thiết bị di động. Tôi đang sử dụng khung giao diện người dùng ngữ nghĩa. Trong tài liệu hướng dẫn tôi tìm thấy một số lớp học:

1. di động chỉ - sẽ chỉ hiển thị bên dưới 768px
2. tablet chỉ - sẽ chỉ hiển thị giữa 768px - 991px
3. máy tính chỉ - luôn luôn sẽ hiển thị 992px trở lên

Ví dụ: tôi đang sử dụng các lớp "chỉ máy tính" để ẩn hình ảnh trên máy tính bảng và thiết bị di động, nhưng kết quả đã làm tôi bối rối.

<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

Ngoài ra, tôi tìm thấy một giải pháp hơn. Có thể cho ai đó nó sẽ hữu ích.

Tôi đã thêm các lớp học "mobile hidden" vào cột mà tôi muốn ẩn trên thiết bị di động.

<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

Thêm mobile only grid để img thẻ

Biểu thức đúng là dưới đây:

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

Answer 3

Nhấn vào đây hoạt động thực sự tốt

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