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

Cara Menggunakan Kueri Media dalam HTML dan CSS untuk Membuat Situs Web yang 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 beradaptasi dengan baik dengan ukuran layar yang berbeda adalah kemewahan yang harus diminta oleh 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 responsivitas dalam desain situs web:

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

Apa Itu Kueri Media?

Media query adalah fitur CSS yang dirilis dalam 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 lanjut: Lembar Cheat Properti CSS3 Esensial

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



Menggunakan Kueri Media

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

Struktur Kueri Media

Contoh Struktur Kueri Media


@media only/not media-type and (expression){
/*CSS code*/
}

Struktur umum kueri media meliputi:



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

Terkait: Menggunakan CSS untuk Memformat Dokumen untuk Pencetakan

Contoh Media Query Dengan Satu-Satunya Kata Kunci


@media only screen and (max-width: 450px){
body{
background-color: blue;
}
}

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. Satu-satunya kata kunci dapat diganti dengan kata kunci not dan kemudian gaya CSS dalam kueri media di atas hanya akan berlaku untuk pencetakan 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.

Contoh Kueri Media Default


/*design for smartphones*/
@media(max-width: 450px){
body{
background-color: blue;
}
}

Penempatan Media Query

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

Metode internal termasuk menambahkan tag ke tag file HTML, dan membuat kueri media dalam parameter tag.

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

Rentang Kueri Media

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

Kode kueri media default yang kami miliki di atas menargetkan ponsel cerdas (lebar 450 piksel ke bawah), jadi jika Anda ingin menyetel latar belakang berbeda untuk tablet, Anda mungkin berpikir cukup menambahkan kode berikut ke file CSS yang sudah ada sebelumnya.

Contoh Kueri Media Tablet


/* design for tablets */
@media(max-width: 800px){
body{
background-color: red;
}
}

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 memecahkan masalah kecil ini adalah dengan menambahkan kueri media untuk tablet sebelum kueri untuk ponsel cerdas; yang terakhir akan menggantikan yang pertama dan Anda sekarang akan memiliki smartphone 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 media query yang dikenal sebagai spesifikasi range, dimana developer dapat membuat media query dengan lebar maksimum dan minimum (range).

Kueri Media Tablet Dengan Contoh Rentang


/* design for tablets */
@media(max-width: 800px) and (min-width:451){
body{
background-color: red;
}
}

Dengan contoh di atas, penempatan kueri media dalam lembar gaya menjadi tidak relevan karena desain untuk tablet dan ponsel cerdas menargetkan dua koleksi 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 dalam tag 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 di tag.

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




href='tablet.css'>


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 800 piksel, gaya di file tablet akan diterapkan ke semua layar dengan lebar antara 450 dan 801 piksel, dan gaya di file ponsel cerdas akan diterapkan ke semua layar di bawah 451 piksel.

di mana saya bisa mencetak sesuatu secara gratis?

Sekarang Anda Memiliki Alat untuk Membuat Desain Responsif

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

Kredit Gambar: Ruang Negatif/ Pexel

Membagikan Membagikan Menciak Surel 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 Topik-topik yang berkaitan
  • Pemrograman
  • Pengembangan web
  • Desain web
  • CSS
Tentang Penulis Kadeisha Kean(21 Artikel Diterbitkan)

Kadeisha Kean adalah Pengembang Perangkat Lunak Full-Stack dan Penulis Teknis/Teknologi. Dia memiliki kemampuan yang berbeda untuk menyederhanakan beberapa konsep teknologi yang paling kompleks; menghasilkan materi yang dapat dengan mudah dipahami oleh setiap pemula teknologi. Dia bersemangat menulis, mengembangkan perangkat lunak yang menarik, dan berkeliling dunia (melalui film dokumenter).

More From Kadeisha Kean

Berlangganan newsletter kami

Bergabunglah dengan buletin kami untuk kiat teknologi, ulasan, ebook gratis, dan penawaran eksklusif!

Klik di sini untuk berlangganan