Cái nào là đúng? Giao diện người dùng ngữ nghĩa: Khả năng hiển thị đáp ứng

Question

Tôi mới sử dụng giao diện người dùng ngữ nghĩa và tôi yêu thích khung công tác. Họ có rất nhiều tài liệu hữu ích, và nhiều thứ khó hiểu hơn.

Khả năng hiển thị đáp ứng hoạt động như thế nào?

Có [máy tính bảng chỉ dành cho điện thoại di động chỉ có màn hình nhỏ chỉ có màn hình lớn] cho vùng chứa ... và một số mã, tôi thấy rằng [chỉ có máy tính, chỉ thiết bị]? Sự khác biệt là gì? cảm ơn bạn.

Answer 1

cập nhật để phản ánh tài liệu hiện tại và phiên bản 2.3.0

công trình Tầm nhìn Responsive bằng cách ẩn một yếu tố nhất định (thường là một ui container, nhưng cũng có thể là ví dụ hàng lưới) trên kích cỡ màn hình cụ thể. Ví dụ: <div class="ui container mobile only"> sẽ chỉ được hiển thị khi màn hình rộng hơn 768px.

Các tài liệu cho lưới có một phần Device Visibility đó cho thấy một số từ bổ nghĩa tầm nhìn tốt:

1. Mobile (mobile only)
2. Tablet (tablet only)
3. Tablet và Mobile (tablet mobile only)
4. Computer (computer only)
5. Màn hình lớn (large screen only)
6. Widescreen (widescreen only)
7. Tất cả các kích cỡ (không sửa đổi)

Các tài liệu không rõ ràng đề cập đến những gì các breakpoint thiết bị đang có, nhưng kiểm tra mã một cách nhanh chóng bộc lộ nó. Dựa trên current version trên GitHub:

1. mobile only sẽ chỉ hiển thị dưới 768px
2. tablet only sẽ chỉ hiển thị giữa 768px - 991px
3. computer only sẽ luôn luôn hiển thị 992px trở lên
4. large screen only sẽ chỉ hiển thị từ 1200px - 1919px
5. widescreen only sẽ chỉ hiển thị 1920px trở lên

Như đã thấy trong các tài liệu cho lưới điện, nó có thể kết hợp những cũng - ví dụ tablet mobile only và mobile computer only hoàn toàn hợp lệ.

Answer 2

<div class="ui container mobile only"> 

Điều này không thể hiển thị dưới 768px.

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

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