Sintaks untuk kedua-dua permintaan media min lebar dan maksima
Reka bentuk web responsif adalah pendekatan untuk membina laman web di mana halaman tersebut secara dinamik boleh mengubah susun atur dan penampilan mereka berdasarkan saiz skrin pelawat . Skrin besar boleh menerima susun atur yang sesuai dengan paparan yang lebih besar manakala peranti yang lebih kecil, seperti telefon bimbit, boleh menerima laman web yang sama diformat dengan cara yang sesuai untuk skrin yang lebih kecil itu. Pendekatan ini memberikan pengalaman pengguna yang lebih baik untuk semua pengguna dan bahkan dapat membantu meningkatkan kedudukan enjin carian . Satu bahagian penting dalam reka bentuk web responsif ialah CSS Media Queries.
Pertanyaan Media adalah seperti kenyataan bersyarat yang sedikit di dalam fail CSS laman web anda, yang membolehkan anda menetapkan peraturan CSS tertentu yang hanya akan memberi kesan apabila syarat tertentu dipenuhi - seperti ketika ukuran skrin berada di atas atau di bawah ambang tertentu.
Pertanyaan Media dalam Tindakan
Jadi bagaimana anda menggunakan Pertanyaan Media di laman web? Berikut adalah contoh yang sangat mudah:
- Anda akan bermula dengan dokumen HTML yang berstruktur bebas daripada sebarang gaya visual (iaitu CSS untuk)
- Dalam fail CSS anda, anda akan bermula seperti yang biasanya anda lakukan dengan menggayakan halaman dan menetapkan garis dasar untuk bagaimana laman web akan kelihatan. Katakan anda mahu saiz font halaman menjadi 16 piksel, anda boleh menulis CSS ini: body {font-size: 16px; }
- Sekarang, anda mungkin mahu meningkatkan saiz fon untuk skrin yang lebih besar yang mempunyai hartanah yang mencukupi untuk berbuat demikian. Ini adalah di mana Petikan Media menendang. Anda akan memulakan Permintaan Media seperti ini: @media skrin dan (min-lebar: 1000px) {}
- Inilah sintaks Query Media. Ia bermula dengan @media untuk menubuhkan Permintaan Media itu sendiri. Seterusnya anda menetapkan "jenis media", yang dalam kes ini adalah "skrin". Ini digunakan untuk skrin komputer meja, tablet, telefon, dan lain-lain. Akhirnya, anda menamatkan Permintaan Media dengan "ciri media". Dalam contoh kami di atas, itu adalah "pertengahan lebar: 1000px". Ini bermakna bahawa Pertanyaan Media akan disiarkan untuk paparan dengan lebar minimum 1000 piksel lebar.
- Selepas elemen-elemen Query Media ini, anda menambah pembukaan dan penutup kerinting penutup sama dengan apa yang akan anda lakukan dalam mana-mana peraturan CSS biasa.
- Langkah terakhir ke Permintaan Media adalah untuk menambah peraturan CSS yang anda ingin gunakan setelah kondisi ini dipenuhi. Anda menambah peraturan CSS antara pendakap kerinting yang membentuk Permintaan Media, seperti ini: @media skrin dan (min-lebar: 1000px) {body {font-size: 20px; }
- Apabila syarat Query Media dipenuhi (tetingkap penyemak imbas sekurang-kurangnya 1000 piksel lebar), gaya CSS ini akan berkuat kuasa, mengubah saiz fon tapak kami dari 16 piksel yang kami buat asalnya kepada nilai baru kami 20 piksel.
Menambah Lebih Banyak Gaya
Anda boleh meletakkan banyak peraturan CSS dalam Permintaan Media ini seperti yang diperlukan untuk menyesuaikan penampilan visual laman web anda. Sebagai contoh, jika anda tidak hanya menaikkan saiz fon kepada 20 piksel, tetapi juga menukar warna semua perenggan kepada hitam (# 000000), anda boleh menambah ini:
@media skrin dan (min-lebar: 1000px) {body {font-size: 20px; } p {color: # 000000; }}Menambah Lebih Banyak Pertanyaan Media
Di samping itu, anda boleh menambah Lagi Pertanyaan Media untuk setiap saiz yang lebih besar, menambahnya ke helaian gaya anda seperti ini:
@media skrin dan (min-lebar: 1000px) {body {font-size: 20px; } p {color: # 000000; {} @media skrin dan (min-lebar: 1400px) {body {font-size: 24px; }}Permintaan Media pertama akan menendang pada 1000 piksel lebar, mengubah saiz fon hingga 20 piksel. Kemudian, sebaik sahaja pelayar berada di atas 1400 piksel, saiz fon akan berubah lagi menjadi 24 piksel. Anda boleh menambah banyak Pertanyaan Media seperti yang diperlukan untuk laman web tertentu anda.
Lebar Min dan Max-Lebar
Terdapat dua cara untuk menulis Pertanyaan Media - dengan menggunakan "min-lebar" atau dengan "max-width". Setakat ini, kita telah melihat "min-lebar" dalam tindakan. Ini menyebabkan Permintaan Media berlaku apabila pelayar telah mencapai sekurang-kurangnya lebar minimum. Jadi pertanyaan yang menggunakan "min-width: 1000px" akan terpakai apabila penyemak imbas sekurang-kurangnya 1000 piksel lebar. Gaya Permintaan Media ini digunakan apabila anda membina laman web dengan cara "mudah alih pertama".
Jika anda menggunakan "max-width", ia berfungsi dengan cara yang bertentangan. Permintaan Media "max-width: 1000px" akan terpakai setelah pelayar telah jatuh di bawah saiz ini.
Mengenai Pelayar Lama
Satu cabaran dengan Pertanyaan Media ialah kekurangan sokongan mereka dalam versi lama di Internet Explorer. Syukurlah, terdapat polyfills yang boleh memuatkan sokongan untuk Pertanyaan Media dalam pelayar yang lama, membolehkan anda menggunakannya di laman web hari ini sambil memastikan bahawa paparan laman web itu tidak kelihatan rusak dalam perisian pelayar yang lebih lama.
Disunting oleh Jeremy Girard pada 1/24/17