Membuat halaman nyaman di ponsel dengan media query

Sebagian besar pengunjung membuka halaman web dari ponsel. Halaman yang baik menyesuaikan diri dengan lebar layar apa pun, dan sebagian besar pekerjaannya ternyata sudah kita lakukan tanpa sadar.

Tag viewport

Di bagian pertama kita menulis baris <meta name="viewport" content="width=device-width, initial-scale=1">. Tanpa baris itu, peramban ponsel menganggap halaman dibuat untuk layar lebar lalu mengecilkannya, sehingga teks tampak sangat kecil. Pastikan baris itu ada di <head> setiap halaman.

Lebar isi dan gambar lentur

Baris teks yang terlalu panjang melelahkan mata. Bungkus isi halaman dengan satu elemen berkelas halaman, lalu batasi lebarnya. Gambar juga perlu dibuat lentur supaya tidak lebih lebar daripada layar.

.halaman {
  max-width: 720px;
  margin: 0 auto;
  padding: 16px;
}

img {
  max-width: 100%;
  height: auto;
}

max-width berarti "paling lebar segini, boleh lebih sempit". margin: 0 auto menengahkan elemen ketika layar lebih lebar daripada batas itu.

Media query pertama

Media query adalah aturan CSS yang hanya berlaku pada kondisi tertentu, misalnya lebar layar minimal 640 piksel. Pendekatan yang kami sarankan: tulis gaya untuk layar kecil sebagai bawaan, lalu tambahkan penyesuaian untuk layar lebih lebar.

/* Bawaan: layar kecil, nama dan menu bersusun */
.kepala {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

/* Layar 640 piksel ke atas: nama dan menu bersebelahan */
@media (min-width: 640px) {
  .kepala {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

Aturan di dalam @media menimpa aturan bawaan hanya ketika syaratnya terpenuhi. Karena ditulis setelah aturan bawaan, ia menang ketika keduanya berlaku bersamaan.

Dengan ini seri "Halaman web pertama" selesai. Kamu sudah punya halaman dengan struktur yang benar, tampilan yang rapi, dan tata letak yang menyesuaikan layar.