Media Queries di CSS - CRUDPRO
Home  ›  Others

Media Queries di CSS

Written By Thursday, June 15, 2023
Media Queries di CSS
Media Queries di CSS

Design website yang responsive telah menjadi sangat penting di zaman sekarang ini karena kami menggunakan begitu banyak perangkat untuk mengakses program website dan bergerak ke yang semakin lebih inklusif.

Tahun lalu saya bekerja dengan team yang hebat dalam mengembangkan aplikasi yang digunakan oleh beberapa pengguna. Kami tidak tahu pada waktu itu apakah aplikasi itu akan digunakan pada handphone, tablet, dan lain-lain. Tapi satu permasalahan yang paling kami temui ialah selama demonstrasi kami ialah bagaimana kami melihat feature tertentu secara visual di layar kami akan berbeda dari tampilan kami pemilik produk melihatnya di sistemnya.

Di saat itulah saya terjebak jika kami belum menerapkan apa yang kami sebut design website responsive. Pemilik Produk kami melihat aplikasi pada screen yang lebih besar dibanding kami pengembang yang menggunakan laptop kami.

Saya berharap saat ini Anda memahami mengapa kita membutuhkan design responsive pada aplikasi website kita. Hingga aplikasi/website terlihat bagus di semua ukuran layar dan terlihat seperti yang Anda inginkan di layar yang beda. Ini juga termasuk font, tata letak, gambar, dan lain-lain dan saat semua berjalan dengan baik sesuai layar yang Anda gunakan, website sebenarnya memiliki design yang responsive.

Jadi bagaimana kita bisa mencapai design responsive?

Salah satu caranya ialah menggunakan kueri Media.

Sintaks kueri media dasar terlihat semacam ini:

@media media-type (media-feature){
/*Write your style here*/
}

Ada tiga komponen kueri media:

  • media-type
  • media-feature
  • ketentuan CSS (di dalam tanda kurung)

Apa itu type media?

Type media pada intinya meliputi tipe media untuk perangkat. Tipe yang berbeda all, print, screen and speech.

all- untuk semua tipe media

print- untuk printer

screen- untuk screen computer, smartphone, tablet

speech- untuk pembaca screen yang membaca halaman dengan lantang.

@media screen and (media-feature){
/*Write your style here*/
}

Catatan- Type media ialah opsional kecuali bila Anda tidak menggunakan atau hanya operator rasional dan secara standar all tipe media diterapkan.

Maka Anda bisa menggunakan sintaks simpel:

@media (media-feature){
/*Write your style here*/
}

Apa itu feature media?

Feature media menyertakan karakteristik browser yang ingin Anda terapkan ketentuannya. Contoh: height dan width dari viewport, colour, orientation, dan lain-lain. Urutan lengkap feature media ada di sini.

Contoh simpel kueri media:

@media (max-width: 600px){
  body{
  background-color: red;
  }
}

Apa itu operator logika?

Saya menyebutkan tentang operator nalar sebelumnya . Jadi operator rasional digunakan bila Anda ingin membuat kueri media yang sedikit lebih sulit misalnya. menggabungkan beberapa media-fitur bersama-sama.

Tiga operator rasional ialah and, comma(,) dan not.

  • and digunakan saat kita ingin menggabungkan beberapa feature media. contoh: 
    @media (min-width: 100px) and (max-width: 600px){
		  body{
		  background-color: red;
		  }
		}
  • (,)comma digunakan saat Anda ingin memisahkan dua feature media dan menerapkan style ketika salah satu kondisinya benar. 
    @media (orientation: portrait), (max-width: 600px){
		  body{
		  background-color: red;
		  }
		}
  • not digunakan saat ingin membalikkan kueri. Ini akan membalikkan kueri yang benar menjadi salah dan salah menjadi benar. 
    @media not all and (monochrome) {
		  font-size: 16px;
		}

Tapi menulis kueri media terpisah untuk tiap perangkat bisa sangat merepotkan. Dalam artikel Cem Eygi, ia menyebutkan beberapa breakpoint yang digunakan untuk pertanyaan media.

  1. 320px — 480px: Perangkat mobile
  2. 481px — 768px: iPad, Tablet
  3. 769px — 1024px: Layar kecil, laptop
  4. 1025px — 1200px: Desktop, layar besar
  5. 1201px dan yang lain — Layar extra besar, TV

Catatan: Selalu tulis kueri media diakhir file CSS Anda.

Dalam banyak wawancara saya sudah ditanya mengenai bagaimanakah cara merancang website yang responsive dan pertanyaan media selalu menjadi bagian besar darinya.

Maka lain kali Anda melihat design Anda dihajar pada ukuran layar yang beda, Anda tahu persis apa yang perlu harus diperbaharui