Bina laman web yang responsif dalam seminggu: pertanyaan media (bahagian 4)

Kandungan

• 01. Menambah pertanyaan media
• 02. Anatomi pertanyaan media
• 03. Satu perkara lagi ...
• 04. Memilih titik putus
• 05. Melaraskan lakaran kecil kami
• 06. Bukan hanya lebar

• Pengetahuan yang diperlukan: CSS dan HTML pertengahan
• Memerlukan: Penyunting teks, penyemak imbas moden, perisian grafik
• Masa Projek: 1 jam (jumlah 5 jam)
• Fail sokongan

Bahagian yang agak baru dari spesifikasi CSS, pertanyaan media tidak diragukan lagi adalah aspek yang paling menarik dalam reka bentuk web responsif dan bidang yang tepat untuk eksperimen lebih lanjut.

Setelah menerima perlunya tata letak adaptif, beberapa melihat permintaan media sebagai alat untuk memperbaiki susun atur penyesuaian ke laman selebar tetap yang ada. Di antara mereka yang telah menggunakan susun atur responsif, banyak yang melakukannya dari perspektif desktop, menyembunyikan kandungan dan ciri ketika viewport menyempit.

Sepanjang tutorial ini, kami telah menggunakan pendekatan alternatif, mudah alih terlebih dahulu. Sekarang, ketika kita ingin memasukkan pertanyaan media, kita dapat memikirkannya menambah ciri sebagai harta tanah skrin meningkat, selamat dalam pengetahuan bahawa penanda dan reka bentuk yang menyokong laman web kami memberikan garis dasar yang terhormat.

Hari ini, kita akan bergerak di luar portfolio corak kita dan membina halaman individu yang diperlukan untuk laman web kita. Dengan berbuat demikian, kita akan melihat bagaimana pertanyaan media dibina, dan menerapkannya dengan cara yang benar-benar responsif.

01. Menambah pertanyaan media

Dengan komponen dalam portfolio corak kami lengkap dan berfungsi di luar batas susun atur apa pun, sudah tiba masanya untuk memindahkannya ke halaman berbeza yang membentuk laman web kami.

Kami akan mulakan dengan laman utama kami. Dari reka bentuk berorientasikan desktop, kita dapat melihat bahawa di ruang pandang yang lebih luas susun atur kita akan muncul seperti berikut:

Mengambil ukuran dari reka bentuk kami, kami dapat menggambarkan kawasan dokumen dalam CSS seperti berikut:

.dokumen {
pembalut: 0 5%;
}
. utama {
lebar: 74.242424242424%; / * 784/1056 * /
terapung: kiri;
}
Pelengkap {
lebar: 22.727272727273%; / * 240/1056 * /
terapung: betul;
}

Seperti yang kita pelajari di bahagian kedua tutorial ini, kita menggunakan formula berikut untuk mengira peratusan lebar lajur ini:

(sasaran / konteks) * 100 = hasil

Apabila kami mengubah saiz penyemak imbas kami, kami akan melihat bahawa susun atur desktop kami berskala dari skrin ukuran terkecil hingga yang terbesar. Sudah tentu, pada ukuran kecil lajurnya terlalu sempit dan panjang garis begitu pendek sehingga kandungannya sukar dibaca. Kami hanya mahu susun atur ini apabila terdapat cukup ruang untuk berfungsi.

Di sinilah pertanyaan media masuk. Dengan andaian bahawa susun atur ini hanya akan berlaku apabila penyemak imbas lebih lebar daripada 768 piksel, kita dapat menambahkan CSS berikut:

.dokumen {
pembalut: 0 5%;
}
Skrin @media dan (lebar minimum: 768px) {
. utama {
lebar: 74.242424242424%; / * 784/1056 * /
terapung: kiri;
}
Pelengkap {
lebar: 22.727272727273%; / * 240/1056 * /
terapung: betul;
}
}

Sekarang, apabila ruang pandang lebih sempit daripada 768 piksel, semua yang ada dalam pertanyaan media akan diabaikan. Itu akan diabaikan oleh penyemak imbas yang tidak menyokong pertanyaan media juga.

02. Anatomi pertanyaan media

Untuk memahami apa yang berlaku di sini, mari kita lihat bagaimana pertanyaan media dibina. Kita boleh membahagikannya kepada dua bahagian:

• Skrin @media: Bahagian pertama pertanyaan media adalah jenis media. Anda mungkin mengenali sintaks ini jika anda pernah memasukkan gaya cetakan dalam CSS anda. Anda juga mungkin mengenali jenis nama dari media atribut pada pautan> unsur. Ini kerana kedua-duanya menerima set jenis media yang disetujui yang terdapat dalam spesifikasi CSS 2.1.
• (lebar minimum: 768 piksel): Bahagian kedua ialah pertanyaan. Ini merangkumi ciri untuk ditanyakan (dalam kes ini lebar minimum viewport) dan yang sesuai nilai untuk menguji (768 piksel).

Apabila kita bercakap mengenai reka bentuk web yang responsif, ada kecenderungan untuk fokus pada lebar, tetapi ada ciri lain yang dapat kita uji juga:

• (min- | max-) lebar dan (min- | maks-) tinggi: Ini membolehkan kita membuat pertanyaan lebar dan tinggi ruang pandang (iaitu tetingkap penyemak imbas).
• (min- | max-) lebar peranti dan (min- | max-) tinggi peranti: Ini memungkinkan kita untuk bertanya lebar keseluruhan paparan. Menurut pengalaman saya, biasanya lebih masuk akal untuk meletakkan susun atur pada ruang pandang daripada paparan.
• orientasi: Anda boleh segera memikirkan kemungkinan di sini; fikirkan aplikasi yang menunjukkan kandungan berbeza berdasarkan orientasi telefon anda - perkara yang sama boleh dilakukan di web.
• (min- | max-) aspek-nisbah: Ini membolehkan kita menyesuaikan susun atur berdasarkan nisbah tetingkap penyemak imbas…
• (min- | max-) peranti-aspek-nisbah: ... dan ini membolehkan kita melakukan perkara yang sama berdasarkan nisbah aspek peranti. Owen Gregory menulis artikel indah tahun lalu yang meneroka bagaimana kami dapat menggunakan pertanyaan ini untuk mengaitkan reka bentuk kami dengan peranti yang dipaparkan.
• (min- | maks-) monokrom: Kami juga dapat menguji sama ada peranti mempunyai paparan monokrom atau tidak. Bayangkan betapa bergunanya ini sekiranya peranti Kindle e-ink Amazon tidak berbohong dan laporkan skrin mereka sebagai warna!

Bahagian terakhir pertanyaan kami mungkin paling berguna. Dengan menggunakan dan, kita boleh menguji pelbagai ciri dalam satu pertanyaan. Sebagai contoh:

Skrin @ media dan (lebar minimum: 768 piksel) dan (orientasi: lanskap) {
...
}

Seperti yang anda lihat, pertanyaan media dapat membantu kami membina pengalaman yang cukup menarik - dan saya hanya menyentuh permukaannya. Sekiranya anda mencari bacaan ringan pada waktu tidur, anda boleh melakukan lebih buruk daripada membaca spesifikasi pertanyaan media W3C yang menerangkan semua ciri yang dapat kami uji.

03. Satu perkara lagi ...

Walaupun kami telah memasukkan pertanyaan media dalam CSS kami, jika kami melihat laman web kami pada peranti mudah alih, anda akan melihat bahawa laman web kami masih diberikan seolah-olah paparannya lebih lebar daripada 768 piksel.

Untuk memahami mengapa ini berlaku, kita perlu mengambil pelajaran sejarah ringkas.

Ketika iPhone asli diumumkan pada tahun 2007, salah satu titik penjualannya yang besar adalah kemampuan untuk melihat-lihat 'web sebenar', walaupun itu bermaksud laman web berorientasikan desktop lebar tetap yang perlu dihimpit agar pas di layar kecilnya. IPhone dapat melakukan ini dengan melaporkan paparannya selebar 980 piksel, sebelum mengecilkan halaman web agar sesuai dengan layar seluas 320 piksel.

Tetapi iPhone diperkenalkan sebelum munculnya reka bentuk responsif. Sekarang kerana pengarang merancang laman web yang dirancang untuk mudah alih, ciri ini kurang berguna. Syukurlah, Apple memasukkan cara untuk melewati tingkah laku ini, dan kerana ia telah diadopsi oleh kilang lain, ia telah menjadi hampir de facto standard. Ia hanya melibatkan penambahan satu meta elemen untuk markup kami:

nama meta = "viewport" content = "skala awal = 1.0, lebar = lebar peranti" />

Ini memberitahu penyemak imbas viewport bahawa laman web tidak boleh dikecilkan, dan lebar tetingkap penyemak imbas harus diperlakukan sama dengan lebar keseluruhan peranti. Setelah kami menambahkan baris ini, laman web kami akan muncul dengan susun atur yang dimaksudkan:

04. Memilih titik putus

Mari kembali ke pertanyaan media kami:

Skrin @media dan (lebar minimum: 768px) {
...
}

Nilai di mana susun atur biasanya disebut sebagai titik putus. Sekiranya anda ingat, di bahagian dua saya mengatakan bahawa menggunakan piksel adalah petunjuk untuk berfikir tidak responsif, namun di sini saya telah memilih 768 piksel, mungkin kerana ia adalah lebar peranti yang tidak asing lagi.

Daripada memilih titik putus berdasarkan ciri-ciri peranti popular, akan lebih efektif untuk melihat nilai-nilai yang berasal dari kandungan kami, misalnya, panjang garis yang selesa untuk membaca atau ukuran maksimum gambar.

Dengan jenis kami berukuran menggunakan ems, nampaknya masuk akal untuk pertanyaan media kami menggunakan ems juga. Sebenarnya melakukannya mempunyai faedah tambahan. Apabila pengguna mengubah ukuran teks dalam penyemak imbas, halaman akan menyesuaikan diri untuk menggunakan titik putus yang lebih kecil. Laman web kami bukan sahaja akan menyesuaikan diri berdasarkan ukuran ruang pandang, tetapi juga ukuran fon. Sebenarnya, hanya ketika saya melihat Jeremy Keith menunjukkan pertanyaan media berdasarkan em, saya menyedari betapa kuatnya mereka.

Walaupun reka bentuk kami dapat memberikan beberapa petunjuk kemungkinan titik putus, selalunya cara terbaik untuk memilihnya adalah melalui eksperimen. Dengan menyesuaikan lebar tetingkap penyemak imbas, saya memutuskan bahawa 800 piksel adalah lebar yang baik untuk menukar ke susun atur yang lebih kompleks.

Bagaimana kita mengekspresikan 800px dalam ems? Sekali lagi, kita dapat menggunakan formula kita, tetapi apa konteksnya? Semasa mengira ems untuk pertanyaan media, konteksnya selalu menjadi ukuran fon lalai penyemak imbas tidak kira sama ada nilai ini telah diganti dalam CSS anda. Lalai ini biasanya 16px, yang memberi kita:

800 / 16 = 50

Kita sekarang boleh mengemas kini pertanyaan media seperti:

Skrin @media dan (lebar minimum: 50em) {/ * 800px * /
...
}

05. Melaraskan lakaran kecil kami

Anda akan ingat bahawa di bahagian 2 kami menggayakan gambar kecil kami agar responsif. Namun begitu gambar-gambar di dalam gambar kecil ini mencapai lebar penuhnya, luas ruang putih muncul di sebelah kanan setiap gambar. Sekali lagi, pertanyaan media membolehkan kami memperbaikinya.

Inilah CSS asal kami:

ol.media li.media-item {
warna latar: #fff;
margin: 0 4.16666666667% 4.16666666667% 0;
lebar: 47.91666666667%;
terapung: kiri;
}
ol.media li.media-item: nth-child (2n) {
margin-kanan: 0;
}

Titik di mana ruang putih ini muncul sama seperti penyemak imbas tumbuh lebih luas daripada 560 piksel.Kami akan memilih nilai ini untuk menukar untuk menunjukkan tiga lakaran kecil setiap baris. Kita boleh melakukannya dengan menambahkan CSS berikut:

Skrin @media dan (lebar minimum: 35em) {
.media-item {
lebar: 30.612244897959%; / * 240/784 * /
margin: 0 4.081632653061% 1.1429em 0; / * 0 32/784 16 piksel 0 * /
}
.media-item: nth-child (3n) {
margin-kanan: 0;
}
}

Perhatikan bahawa kami tidak perlu menulis semula semua gaya yang diperlukan untuk lakaran kecil dalam pertanyaan media ini, hanya bahagian yang ingin kami sesuaikan.

Melihat perubahan ini di penyemak imbas, anda akan melihat bahawa tidak ada margin di sebelah kanan setiap lakaran kecil kedua. Ini kerana peraturan CSS berikut masih tetap aktif:

ol.media li.media-item: nth-child (2n) {
margin-kanan: 0;
}

Kita perlu mengubah CSS dalam pertanyaan media kita untuk menetapkan semula nilai itu:

Skrin @media dan (lebar minimum: 35em) {
.media-item {
lebar: 30.612244897959%; / * 240/784 * /
margin: 0 4.081632653061% 1.1429em 0; / * 0 32/784 16 piksel 0 * /
}
.media-item: nth-child (2n) {
margin-kanan: 4.081632653061%;
}
.media-item: nth-child (3n) {
margin-kanan: 0;
}
}

Semasa membuat pertanyaan media, selalu perhatikan masalah warisan seperti ini.

06. Bukan hanya lebar

Penting untuk memikirkan pertanyaan media bukan hanya dari segi lebar, tetapi juga pemboleh ubah lain. Contohnya, video di halaman item media kita disembunyikan sebahagiannya apabila ketinggian paparan berkurang. Kami mempunyai teknologi:

.media-objek-pembungkus {
padding-bottom: 56.25%;
lebar: 100%;
tinggi: 0;
kedudukan: saudara;
}
Skrin @media dan (ketinggian maksimum: 35em) dan (orientasi: landskap) {/ * 560px * /
.media-objek-pembungkus {
lebar: 60%;
padding-bottom: 33.75%;
}
}

Malah saya telah memasukkan pertanyaan orientasi untuk memupuk tingkah laku ini dengan lebih mendalam.

Kami dapat mengikuti pendekatan serupa untuk bahagian lain dari reka bentuk kami, menukar versi header yang lebih besar dan memindahkan pautan navigasi ke bahagian atas halaman setelah ruang tersedia.

• Lihat laman utama kami yang responsif
• Lihat halaman item media responsif kami

Dan di sana kita memilikinya! Kami telah membina laman web yang responsif - dan dengan masa lapang! Tidak begitu. Susun atur, gambar dan pertanyaan media yang fleksibel hanyalah permulaan proses reka bentuk responsif.

Esok: Pada bahagian akhir tutorial ini, kita akan melangkaui reka bentuk web yang responsif, dan melihat bagaimana kita dapat membina laman web yang benar-benar responsif.

Paul adalah pereka interaksi yang berpusat di Brighton, England. Dia paling gembira ketika membuat antara muka yang sederhana namun menarik yang berasal dari web.