Media Query

CSS Media Query

Pengenalan

CSS Media Query digunakan sebagai cara untuk mengubah tampilan dan perilaku sebuah website atau aplikasi berdasarkan serangkaian kondisi tertentu.

Teknik media query akan menerapkan custom style yang bisa kita tentukan hanya jika kondisi tertentu benar, misalnya kita ingin mengubah ukuran font hanya ketika lebar layar perangkat diatas 1000px, maka kita bisa melakukannya dengan

@media screen and (min-width: 1000px) {
  /* custom style */
  h1 {
    font-size: 24px;
  }
}

Properti CSS di atas akan diterapkan hanya pada layar perangkat yang memiliki lebar 1000 pixel atau lebih.

Kita juga bisa mengubah style pada element-element lainnya agar tetap terlihat sempurna ketika diakses melalui perangkat apapun, atau dengan kata lain website kita akan tampak responsif.

Cara tersebut lebih difungsikan pada konsep Responsive Design yaitu bagaimana membangun sebuah aplikasi web yang memiliki perilaku berbeda ketika dihadapkan pada kondisi tertentu, seperti ketika diakses melalui smartphone, tablet, desktop dan perangkat lainnya.

Penggunaan

Kita bisa menuliskan CSS Media Query menggunakan @media rule seperti berikut:

@media [media-type] and ([media-feature]) {
  /* custom style */
  element {
    /* style */
  }
}

PERHATIKAN! dalam penulisan Media Query antara media-type dengan media-feature harus selalu dihubungkan dengan and. Kenapa? karena pada dasarnya @media rule itu sendiri merupakan sebuah operator logika yang menyatakan bahwa “jika” media-type dan media-feature cocok, maka terapkan custom style.

Media-Type

Media type merupakan jenis media yang dijadikan sebuah target pada @media rule. Ada beberapa media type diantaranya:

  • screen : media dengan layar seperti komputer, tablet, smartphone dll.
  • print : media yang memecah halaman menjadi dokumen untuk dicetak seperti printer
  • speech : media yang membaca halaman dengan suara seperti screen reader
  • all : semua media (default)

Media Feature

Setelah menentukan Media type, ada Media feature yang memberi detail yang lebih spesifik untuk menentukan fitur pada media query.

  • height : menentukan tinggi viewport
  • width : menentukan lebar viewport
  • min-height : menentukan minimal tinggi viewport
  • min-width : menentukan minimal lebar viewport
  • max-height : menentukan maksimal tinggi viewport
  • max-width : menentukan maksimal lebar viewport

Ada banyak sekali media feature yang bisa digunakan, tetapi dalam ranah Responsive Design hanya ada beberapa yang seringkali digunakan. Kamu bisa lihat disini untuk lengkapnya.

Responsive Desain

Ketika kita ingin membuat sebuah desain website yang mampu beradaptasi dengan beragam jenis perangkat, maka di sinilah cara yang bisa dilakukan oleh CSS Media Query.

Misal, kita punya properti CSS seperti berikut:

body {
  width: 100%;
  height: 100vh;
  background-color: lightgreen;
  margin: 0 auto;
}

Bagaimana cara mengubah value width hanya jika lebar layarnya 768px atau kurang?

Jika ingin melakukan hal ini, kita bisa menentukan screen pada media type dan max-width pada media feature

@media screen and (max-width: 768px) {
  body {
    /* Misal, kita ingin mengubah `width` ke 80%  */
    width: 80%;
  }
}

Hasilnya, ketika lebar screen ≤ 768px, maka lebar element body akan menjadi 80%

Bagaimana cara mengubah value height hanya jika lebar layarnya 480px atau lebih?.

Kita bisa menggunakan min-width untuk media feature, lalu ubah nilainya dengan 480px;

@media screen and (min-width: 480px) {
  body {
    /* Misal, kita ingin mengubah `height` ke 80vh  */
    height: 80vh;
  }
}

Hasilnya, ketika lebar screen ≥ 480px, maka tinggi element body akan menjadi 80vh

Bagaimana cara mengubah value background-color jika lebar layarnya antara 480px hingga 768px.

Pada kasus ini, kita bisa menggunakan operator and untuk menghubungkan 2 kondisi pada media feature, seperti menargetkan range lebar layar. Kemudian gunakan min-width dan max-width untuk kedua media feature tersebut.

/*  Jika lebar screen adalah 480px s/d 768px, maka terapkan style berikut */
@media screen and (min-width: 480px) and (max-width: 768px) {
  body {
    /* Misal, kita mengubah `background-color` dengan Salmon  */
    background-color: salmon;
  }
}

Hasilnya, warna background akan berubah ketika lebar screen berada di 480px s/d 768px. Selain daripada itu, warna background akan kembali seperti semula.

Selain mengubah value pada properti CSS, bisa juga untuk menyembunyikan (hidden) element tertentu, contohnya seperti:

@media screen and (max-width: 320px) {
  body {
    display: none;
  }
}

Hasilnya, ketika lebar screen di bawah 320px, maka element body akan menghilang.

Breakpoints

Kita tau bahwa ukuran layar dari berbagai perangkat tentu sangatlah bervariasi, kita tidak mungkin menerapkan style css untuk semua jenis perangkat yang ada.

Tetapi, ada beberapa Breakpoints tertentu yang biasanya menjadi ‘patokan’ agar lebih mudah dalam mendesain website yang responsif.

Xtra Small (xs) Small (sm) Medium (md) Large (lg) XtraLarge (xl)
< 557px ≥ 557px ≥ 768px ≥ 1024px ≥ 1280px

Pada implementasinya, kita bisa gunakan teknik seperti berikut:

/* Xtra Small (xs) - Small Phone */
element {
  /* styles */
}

element-2 {
  /* styles */
}

/* Small screen (sm) - Phone */
@media screen and (min-width: 557px) {
  /* Custom Styles */
  element {
    /* styles */
  }
  element-2 {
    /* styles */
  }
}

/* Medium screen (md) - Tablet */
@media screen and (min-width: 768px) {
  /* Custom Styles */
  element {
    /* styles */
  }
  element-2 {
    /* styles */
  }
}

/* Large screen (lg) - Laptop */
@media screen and (min-width: 1024px) {
  /* Custom Styles */
  element {
    /* styles */
  }
  element-2 {
    /* styles */
  }
}

/* Xtra Large screen (xl) - PC Monitor */
@media screen and (min-width: 1280px) {
  /* Custom Styles */
  element {
    /* styles */
  }
  element-2 {
    /* styles */
  }
}

Teknik diatas merupakan cara untuk membuat desain website yang mendahulukan versi mobile sebelum ke versi desktop, atau istilah dalam Web Desain adalah Mobile First.

← Box Sizing
Flexbox →