Cara Menggunakan Kueri Media di HTML dan CSS untuk Membuat Situs Web Responsif

Jika Anda ingin mengembangkan situs web / aplikasi web, maka mengetahui cara membuat desain responsif sangat penting untuk kesuksesan Anda.

Di masa lalu, pembuatan situs web yang dapat beradaptasi dengan baik dengan berbagai ukuran layar adalah kemewahan yang harus diminta pemilik situs web dari pengembang. Namun, peningkatan penggunaan smartphone dan tablet kini telah membuat desain responsif menjadi kebutuhan dalam dunia pengembangan perangkat lunak.

Menggunakan kueri media adalah cara terbaik untuk memastikan bahwa situs web / aplikasi web Anda muncul persis seperti yang Anda inginkan di setiap perangkat.

Memahami Desain Responsif

Singkatnya, desain responsif berkaitan dengan penggunaan HTML / CSS untuk membuat tata letak situs web / aplikasi web yang menyesuaikan dengan berbagai ukuran layar. Dalam HTML / CSS ada beberapa cara berbeda untuk mencapai daya tanggap dalam desain situs web:

• Menggunakan unit rem dan em daripada piksel (px)
• Mengatur viewport / skala setiap halaman web
• Menggunakan kueri media

Kueri media adalah fitur CSS yang dirilis pada versi CSS3. Dengan diperkenalkannya fitur baru ini, pengguna CSS mendapatkan kemampuan untuk menyesuaikan tampilan halaman web berdasarkan tinggi, lebar, dan orientasi perangkat / layar (mode lanskap atau potret).

Baca lebih lajut: Lembar Cheat Properti CSS3 Esensial

Kueri media menyediakan kerangka kerja untuk membuat kode sekali dan menggunakannya beberapa kali di seluruh program Anda. Ini mungkin tampak tidak terlalu membantu jika Anda mengembangkan situs web dengan hanya tiga laman web, tetapi jika Anda bekerja untuk sebuah perusahaan dengan ratusan halaman web yang berbeda — ini akan terbukti menjadi waktu yang luar biasa penghemat.

Ada beberapa hal berbeda yang perlu Anda pertimbangkan saat menggunakan kueri media: struktur, penempatan, rentang, dan penautan.

@media saja / bukan jenis media dan (ekspresi) {
/ * Kode CSS * /
}

Struktur umum kueri media meliputi:

• Kata kunci @media
• Kata kunci bukan / satu-satunya
• Jenis media (dapat berupa layar, cetak, atau ucapan)
• Kata kunci "dan"
• Ekspresi unik diapit tanda kurung
• Kode CSS diapit oleh sepasang kurung kurawal buka dan tutup.

Terkait: Menggunakan CSS untuk Memformat Dokumen untuk Pencetakan

@media only screen dan (max-width: 450px) {
tubuh{
warna latar belakang: biru;
}
}

Contoh di atas menerapkan gaya CSS (khususnya warna latar belakang biru) hanya untuk layar perangkat yang memiliki lebar 450 piksel ke bawah — jadi pada dasarnya ponsel cerdas. Kata kunci "hanya" dapat diganti dengan kata kunci "tidak" dan gaya CSS di kueri media di atas hanya akan berlaku untuk cetakan dan ucapan.

Namun, secara default, deklarasi kueri media umum berlaku untuk ketiga jenis media sehingga tidak perlu menentukan jenis media kecuali tujuannya adalah untuk mengecualikan satu atau lebih dari mereka.

/ * desain untuk smartphone * /
@media (lebar maksimal: 450px) {
tubuh{
warna latar belakang: biru;
}
}

Kueri media adalah properti CSS; oleh karena itu, ini hanya dapat digunakan dalam bahasa gaya. Ada tiga cara berbeda untuk memasukkan CSS dalam kode Anda; namun, hanya dua dari metode tersebut yang memberikan cara praktis untuk menyertakan kueri media dalam program Anda — CSS internal atau eksternal.

Metode internal termasuk menambahkan

Metode eksternal melibatkan pembuatan kueri media dalam file CSS eksternal dan menautkannya ke file HTML Anda melalui menandai.

Apakah kueri media digunakan melalui CSS internal atau eksternal, ada satu aspek utama dari bahasa gaya yang dapat memengaruhi cara kueri media berfungsi secara negatif. CSS memiliki aturan urutan prioritas. Saat menggunakan file Pemilih CSS, atau dalam hal ini kueri media, setiap kueri media baru yang ditambahkan ke file CSS menimpa (atau lebih diutamakan daripada) yang datang sebelumnya.

Kode media query default yang kami miliki di atas menargetkan smartphone (lebar 450px ke bawah), jadi jika Anda ingin menyetel file latar belakang yang berbeda untuk tablet Anda mungkin berpikir Anda bisa menambahkan kode berikut ke file CSS yang sudah ada.

/ * desain untuk tablet * /
@media (lebar-maks: 800px) {
tubuh{
background-color: merah;
}
}

Satu-satunya masalah adalah, karena urutan prioritas, tablet akan memiliki warna latar belakang merah dan smartphone sekarang juga akan memiliki warna latar belakang merah karena 450px dan di bawahnya di bawah 800px.

Salah satu cara untuk mengatasi masalah kecil ini adalah dengan menambahkan kueri media untuk tablet sebelum yang untuk ponsel cerdas; yang terakhir akan menggantikan yang pertama dan sekarang Anda akan memiliki ponsel cerdas dengan warna latar belakang biru dan tablet dengan warna latar belakang merah.

Namun, ada cara yang lebih baik untuk mencapai gaya terpisah untuk ponsel cerdas dan tablet tanpa mengkhawatirkan urutan prioritas. Ini adalah fitur kueri media yang dikenal sebagai spesifikasi rentang, di mana pengembang dapat membuat kueri media dengan lebar maksimum dan minimum (rentang).

/ * desain untuk tablet * /
@media (max-width: 800px) dan (min-width: 451) {
tubuh{
background-color: merah;
}
}

Dengan contoh di atas, penempatan kueri media dalam stylesheet menjadi tidak relevan karena desain untuk tablet dan ponsel cerdas menargetkan dua kumpulan lebar yang terpisah.

Jika Anda tidak ingin menyematkan kueri media ke dalam kode CSS Anda, ada metode alternatif yang dapat Anda gunakan. Metode ini melibatkan penggunaan kueri media di tag dari file HTML, jadi alih-alih memiliki satu lembar gaya besar yang berisi preferensi gaya untuk ponsel cerdas, tablet, dan komputer — Anda dapat menggunakan tiga file CSS terpisah dan membuat kueri media Anda di itu menandai.

Itu tag adalah elemen HTML yang digunakan untuk mengimpor gaya CSS dari lembar gaya eksternal. Tag ini memiliki properti media yang bekerja dengan cara yang sama seperti kueri media di CSS.

 stylesheet utama 

 lembar gaya tablet 
href = "tablet.css">
 lembar gaya ponsel cerdas 

Kode di atas harus ditempatkan di

tag file HTML Anda. Sekarang yang perlu Anda lakukan adalah membuat tiga file CSS terpisah dengan nama file main.css, tablet.css, dan smartphone.css — lalu buat desain spesifik yang Anda inginkan untuk setiap perangkat.

Gaya di file utama akan diterapkan ke semua layar dengan lebar lebih dari 800px, gaya di file tablet akan diterapkan ke semua layar dengan lebar antara 450px dan 801px, dan gaya dalam file ponsel cerdas akan diterapkan ke semua layar di bawah ini 451px.

Jika Anda sampai di akhir artikel ini, Anda dapat mempelajari apa itu desain responsif dan mengapa itu berguna. Anda sekarang dapat mengidentifikasi dan menggunakan kueri media di file CSS dan HTML. Selain itu, Anda diperkenalkan dengan urutan prioritas di CSS dan melihat bagaimana hal itu dapat memengaruhi cara kueri media Anda berfungsi.

Kredit Gambar: Ruang Negatif /Pexels

Cara Mengatur Gambar Latar Belakang di CSS

CSS adalah alat yang ampuh untuk menata halaman web. Mempelajari cara menempatkan gambar latar belakang mengajarkan Anda banyak dasar-dasar CSS.

Baca Selanjutnya

Tentang Penulis