Media query

Media query merupakan fitur bawaan CSS3 dengan kemampuannya yaitu dapat melakukan adaptasi css sesuai dengan screen yang ditempati websitenya.

Dengan kemampuan ini dapat memudahkan untuk mengatur layout dan user experience user.

secara umum untuk membuat media query dapat dilakukan dengan struktur berikut:

@media <media type> and (condition) {
  /* TODO: set new css */
}

Penggunaan

Media query digunakan dengan beberapa kondisi sesuai device yang sekarang beredar. jadi perlu membuat media query untuk desktop, table dan smartphone.

sebagi contoh ingin menerapkan media query diatas 768px keatas atau ukuran tablet keatas kodenya seperti ini

@media only screen and (min-width: 768px) {
  /* TODO: set css */
}

Keterangan:

• only screen: menerapkan media query hanya untuk layout layar(desktop, tablet dsb) ]
• (min-width: 768px): menerapkan kondisi media query dijalankan

bagaimana jika ingin menerapkan 768px kebawah? untuk menerapkan media query kebawah yaitu

@media only screen and (max-width: 768px) {
  /* TODO: set css */
}

Gambaran kondisi media query seperti ini

Jenis media query (Media Type)

Tipe media query ada beberapa tipe yaitu

• all : Untuk semua jenis media(dokumen, screen, speech)
• print: Untuk jenis dokumen
• screen: Untuk layout screen/layar
• Speech

Orientation

media query dapat digunakan untuk orientasi device ketika potrait ataupun landscape

Sebagai contoh berikut

@media only screen and (max-width: 768px) and (orientation: landscape) {
  /* TODO: set css */
}

Contoh penggunaan media query dengan beberapa query

p {
  background: red;
}

/* media query untuk device dibawah 768px */
@media screen and (max-width: 768px) {
  p {
    background: blue;
  }
}

@media screen and (max-width: 450px) {
  p {
    background: cyan;
  }
}

atau

/* media query untuk device diatas 768px */
@media screen and (min-width: 768px) {
  p {
    background: red;
  }
}

/* media query untuk device dibawah 768px */
@media screen and (max-width: 768px) {
  p {
    background: blue;
  }
}

@media screen and (max-width: 450px) {
  p {
    background: cyan;
  }
}

hasilnya akan sama saja

Alternative media query

untuk alternative lain selain media query dapat memainkan javascript untuk mengubah css. sayangnya hal ini akan mempersulit ddevelopment. atau bisa menggunakan framework css atau utility css untuk memanagemen media query

Reference:

• Media Query Mozilla