MEDIA QUERY, BREAKPOINT DAN ORIENTATION

Media query, breakpoint, dan orientasi adalah tiga komponen kunci dalam pembuatan situs web responsif. Mereka membantu dalam menyesuaikan tampilan situs web berdasarkan ukuran dan orientasi layar pengguna.

Media Query

Media Query adalah fitur CSS3 yang memungkinkan konten untuk beradaptasi dengan berbagai jenis perangkat, seperti desktop, tablet, dan smartphone. Melalui media query, kamu dapat menentukan aturan CSS khusus untuk tampilan layar yang berbeda.

Contoh penggunaan media query:

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

Pada contoh di atas, latar belakang halaman akan berubah menjadi lightblue jika ukuran tampilan layarnya 600px atau kurang.

Breakpoint

Breakpoint adalah titik di mana layout situs web akan berubah untuk menyesuaikan ukuran layar yang berbeda. Breakpoint biasanya ditentukan menggunakan media query.

Berikut adalah contoh pengaturan breakpoint dalam CSS:

/* Untuk layar yang lebih besar dari 600px */
@media screen and (min-width: 600px) {
  body {
    background-color: lightgreen;
  }
}

/* Untuk layar yang lebih kecil atau sama dengan 600px */
@media screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

Dalam contoh ini, ketika layar lebih besar dari 600px, latar belakang halaman akan berubah menjadi lightgreen. Ketika layar sama dengan atau lebih kecil dari 600px, latar belakang akan berubah menjadi lightblue.

Orientasi

Orientasi mengacu pada mode tampilan perangkat, bisa berupa portrait (vertikal) atau landscape (horizontal). CSS media query juga dapat digunakan untuk mengubah gaya tampilan berdasarkan orientasi layar.

Contoh dalam kode CSS:

/* Untuk orientasi portrait */
@media screen and (orientation: portrait) {
  body {
    background-color: lightyellow;
  }
}

/* Untuk orientasi landscape */
@media screen and (orientation: landscape) {
  body {
    background-color: lightpink;
  }
}

Pada contoh di atas, ketika perangkat dalam mode portrait, latar belakang akan menjadi lightyellow. Ketika dalam mode landscape, latar belakang akan berubah menjadi lightpink.

Media query, breakpoint, dan orientasi membantu memastikan bahwa situs web kamu dapat diakses dan mudah digunakan di berbagai perangkat dan ukuran layar. Kombinasi ketiganya memungkinkan kamu untuk menciptakan desain yang adaptif dan fleksibel.