Cara Menggunakan Breakpoint Untuk Device Tertentu

Reviewed by Sutiono S.Kom., M.Kom., M.T.I

by Hanifah Nurbaeti March 9, 2021

Di bawah ini kita akan mempelajari cara menggunakan kueri media untuk breakpoint perangkat umum.

Tipe Breakpoint Untuk Suatu Device

Ada banyak sekali layar dan perangkat dengan tinggi dan lebar yang berbeda, jadi sulit untuk membuat breakpoint yang tepat untuk setiap perangkat. Untuk menyederhanakan, kita bisa menargetkan lima kelompok umum:

Contoh

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.example {
  padding: 20px;
  color: white;
}
/* Perangkat ekstra kecil (ponsel, 600px dan ke bawah) */
@media only screen and (max-width: 600px) {
  .example {background: LightBlue;}
}

/* Perangkat kecil (tablet potret dan ponsel besar, 600px ke atas) */
@media only screen and (min-width: 600px) {
  .example {background: DarkTurquoise;}
}

/* Perangkat sedang (tablet lanskap, 768 piksel dan lebih tinggi) */
@media only screen and (min-width: 768px) {
  .example {background: Cyan;}
} 

/* Perangkat besar (laptop / desktop, 992px dan lebih tinggi) */
@media only screen and (min-width: 992px) {
  .example {background: Black;}
} 

/* Perangkat ekstra besar (laptop dan desktop besar, 1200px ke atas) */
@media only screen and (min-width: 1200px) {
  .example {background: Yellow;}
}
</style>
</head>
<body>

<h2>Typical Breakpoints</h2>
<p class="example">Ubah ukuran jendela browser untuk melihat  warna latar belakang paragraf ini berubah pada ukuran layar yang berbeda.</p>

</body>
</html>

/* Perangkat ekstra kecil (ponsel, 600px dan ke bawah) */
@media only screen and (max-width: 600px) {
  .example {background: LightBlue;}
}

/* Perangkat kecil (tablet potret dan ponsel besar, 600px ke atas) */
@media only screen and (min-width: 600px) {
  .example {background: DarkTurquoise;}
}

/* Perangkat sedang (tablet lanskap, 768 piksel dan lebih tinggi) */
@media only screen and (min-width: 768px) {
  .example {background: Cyan;}
} 

/* Perangkat besar (laptop / desktop, 992px dan lebih tinggi) */
@media only screen and (min-width: 992px) {
  .example {background: Black;}
} 

/* Perangkat ekstra besar (laptop dan desktop besar, 1200px ke atas) */
@media only screen and (min-width: 1200px) {
  .example {background: Yellow;}
}