# 058: Header Tersuai untuk Galeri, Bahagian 2 (dengan Pertanyaan Media Reverso) - Trik CSS

Anonim

Kami mempunyai tajuk galeri asas, tetapi tidak ada orang biru kecil yang Erica letakkan dalam ilustrasi asal. Kami telah membicarakannya terlebih dahulu, dan memutuskan bahawa akan menjadi sangat keren jika ketika layar diubah ukurannya, orang akan tetap berada di saat dinding galeri bergerak di belakang mereka, sehingga kelihatan seperti mereka melihat galeri dengan kagum.

Oleh kerana grafik orang adalah hiasan semata-mata, penggunaan markup untuk mereka tidak sesuai. Nasib baik ada dua daripadanya dan kami mendapat dua elemen pseudo percuma pada setiap elemen ( ::beforedan ::after). Kami menggunakannya untuk menambahkannya.

Kami memperkenalkan konsep dalam video ini yang akan terus berguna, iaitu konsep "pertanyaan media terbalik". Kami sebahagian besarnya menggunakan desktop dalam reka bentuk ini, jadi pertanyaan media kami berdasarkan kebanyakannya max-width. Tetapi jika kita membuat pertanyaan media yang sama berdasarkannya min-width, kita dapat menargetkan layar hanya ketika lebih besar dari ukuran tertentu, tidak lebih kecil.

Dalam keadaan ini, grafik orang tidak sesuai pada layar kecil Oleh itu, kami menggunakan pertanyaan media terbalik untuk memuatkannya, dengan cara itu kami akan memuatkannya pada skrin besar yang mereka kerjakan, tetapi jangan memuatkannya pada skrin kecil. Itu lebih baik daripada memuatkannya sepanjang masa dan menyembunyikannya di skrin kecil.