Sintaks untuk kueri media lebar-lebar dan lebar-lebar
Desain web responsif adalah pendekatan untuk membuat halaman web di mana halaman-halaman itu dapat secara dinamis mengubah tata letak dan penampilan mereka berdasarkan ukuran layar pengunjung . Layar besar dapat menerima tata letak yang sesuai untuk layar yang lebih besar sementara perangkat yang lebih kecil, seperti ponsel, dapat menerima situs web yang sama yang diformat dengan cara yang sesuai untuk layar yang lebih kecil. Pendekatan ini memberikan pengalaman pengguna yang lebih baik bagi semua pengguna dan bahkan dapat membantu meningkatkan peringkat mesin pencari . Bagian penting dari desain web responsif adalah CSS Media Queries.
Pertanyaan Media seperti pernyataan kondisional kecil di dalam file CSS situs web Anda, memungkinkan Anda untuk menetapkan aturan CSS tertentu yang hanya akan berpengaruh setelah kondisi tertentu dipenuhi - seperti ketika ukuran layar di atas atau di bawah batas tertentu.
Permintaan Media sedang Beraksi
Jadi bagaimana Anda menggunakan Media Queries di situs web? Berikut ini contoh yang sangat sederhana:
- Anda akan mulai dengan dokumen HTML yang terstruktur dengan baik, bebas dari gaya visual apa pun (itu adalah untuk apa CSS)
- Dalam file CSS Anda, Anda akan mulai seperti biasanya Anda lakukan dengan menata halaman dan menetapkan garis dasar untuk bagaimana situs web akan terlihat. Katakanlah Anda ingin ukuran font halaman menjadi 16 piksel, Anda bisa menulis CSS ini: body {font-size: 16px; }
- Sekarang, Anda mungkin ingin meningkatkan ukuran font untuk layar yang lebih besar yang memiliki banyak real estat untuk melakukannya. Di sinilah Media Queries menendang. Anda akan memulai Media Query seperti ini: @media screen dan (min-width: 1000px) {}
- Ini adalah sintaks dari Permintaan Media. Ini dimulai dengan @media untuk membuat Permintaan Media itu sendiri. Selanjutnya Anda mengatur "jenis media", yang dalam hal ini adalah "layar". Ini berlaku untuk layar komputer desktop, tablet, telepon, dll. Akhirnya, Anda mengakhiri Query Media dengan "fitur media". Dalam contoh kita di atas, itu adalah "pertengahan lebar: 1000px". Ini berarti bahwa Media Query akan menendang untuk menampilkan dengan lebar minimum 1000 piksel.
- Setelah elemen-elemen ini dari Media Query, Anda menambahkan pembuka dan penutupan kurung kurawal mirip dengan apa yang akan Anda lakukan dalam aturan CSS normal.
- Langkah terakhir ke Media Query adalah menambahkan aturan CSS yang ingin Anda terapkan setelah kondisi ini terpenuhi. Anda menambahkan aturan CSS ini di antara kurung kurawal yang membentuk Query Media, seperti ini: layar @media dan (min-width: 1000px) {body {font-size: 20px; }
- Ketika kondisi Permintaan Media terpenuhi (jendela browser setidaknya 1.000 piksel lebar), gaya CSS ini akan berlaku, mengubah ukuran font situs kami dari 16 piksel yang kami bangun awalnya ke nilai baru kami sebesar 20 piksel.
Menambahkan Lebih Banyak Gaya
Anda dapat menempatkan banyak aturan CSS dalam Media Query ini sesuai kebutuhan untuk menyesuaikan tampilan visual situs web Anda. Misalnya, jika Anda ingin tidak hanya meningkatkan ukuran font menjadi 20 piksel, tetapi juga mengubah warna semua paragraf menjadi hitam (# 000000), Anda dapat menambahkan ini:
@media screen dan (min-width: 1000px) {body {font-size: 20px; } p {color: # 000000; }}Menambahkan Lebih Banyak Pertanyaan Media
Selain itu, Anda dapat menambahkan lebih banyak Kueri Media untuk setiap ukuran yang lebih besar, menambahkannya ke style sheet Anda seperti ini:
@media screen dan (min-width: 1000px) {body {font-size: 20px; } p {color: # 000000; {} Layar @media dan (min-width: 1400px) {body {font-size: 24px; }}Query Media pertama akan menendang pada lebar 1000 piksel, mengubah ukuran font menjadi 20 piksel. Kemudian, setelah browser berada di atas 1400 piksel, ukuran font akan berubah lagi menjadi 24 piksel. Anda dapat menambahkan banyak Permintaan Media yang diperlukan untuk situs web khusus Anda.
Lebar-Min dan Lebar-Maks
Biasanya ada dua cara untuk menulis Pertanyaan Media - dengan menggunakan "min-width" atau dengan "max-width". Sejauh ini, kami telah melihat "min-width" dalam aksi. Ini menyebabkan Query Media mulai berlaku setelah browser mencapai setidaknya lebar minimum. Jadi, kueri yang menggunakan "lebar minimum: 1000px" akan berlaku saat peramban memiliki lebar setidaknya 1000 piksel. Gaya Media Query ini digunakan ketika Anda membangun situs dengan cara "seluler-pertama".
Jika Anda menggunakan "max-width", ia bekerja dengan cara yang berlawanan. Query Media "max-width: 1000px" akan berlaku setelah browser jatuh di bawah ukuran ini.
Mengenai Peramban Lama
Satu tantangan dengan Media Queries adalah kurangnya dukungan mereka dalam versi lama di Internet Explorer. Untungnya, ada polyfill tersedia yang dapat menambal dukungan untuk Media Queries di browser yang lebih tua, memungkinkan Anda untuk menggunakannya di situs web saat ini sementara masih memastikan bahwa tampilan situs itu tidak terlihat rusak di peramban peramban yang lebih tua.
Diedit oleh Jeremy Girard pada 24/1/17