# 058: Tiêu đề Tùy chỉnh cho Thư viện, Phần 2 (với Truy vấn Phương tiện Reverso) - Thủ thuật CSS

Anonim

Chúng tôi có tiêu đề thư viện cơ bản tại chỗ, nhưng nó thiếu những người nhỏ màu xanh mà Erica đưa vào hình minh họa gốc. Chúng tôi đã nói trước về nó và quyết định rằng sẽ khá tuyệt nếu khi màn hình được thay đổi kích thước, mọi người sẽ ở lại khi bức tường phòng trưng bày di chuyển về phía sau, vì vậy có vẻ như họ đang duyệt qua phòng trưng bày một cách kinh ngạc.

Vì đồ họa con người hoàn toàn là cơ bản nên việc sử dụng đánh dấu cho chúng không phải là lý tưởng. May mắn thay, có hai trong số chúng và chúng tôi nhận được hai phần tử giả miễn phí trên mỗi phần tử ( ::before::after). Chúng tôi sử dụng những thứ đó để thêm chúng.

Chúng tôi giới thiệu một khái niệm trong video này sẽ tiếp tục hữu ích, khái niệm "đảo ngược truy vấn phương tiện". Chúng tôi chủ yếu làm việc trên máy tính để bàn trong thiết kế này, vì vậy các truy vấn phương tiện của chúng tôi chủ yếu dựa trên max-width. Nhưng nếu chúng tôi thiết lập các truy vấn phương tiện tương tự dựa trên min-width, chúng tôi chỉ có thể nhắm mục tiêu màn hình khi nó lớn hơn một kích thước nhất định, không phải nhỏ hơn.

Trong trường hợp này, đồ họa con người không phù hợp với màn hình nhỏ. Vì vậy, chúng tôi sử dụng một truy vấn phương tiện đảo ngược để tải chúng, theo cách đó chúng tôi sẽ tải chúng trên màn hình lớn mà chúng hoạt động, nhưng không tải chúng trên màn hình nhỏ. Điều đó tốt hơn là luôn tải chúng và ẩn chúng trên màn hình nhỏ.