Reka Bentuk Web Responsif dengan Pertanyaan Media

Kuliah 6: Reka Bentuk Web Responsif dengan Pertanyaan Media

Dalam kuliah ini, kita akan menyelami reka bentuk web responsif, kemahiran penting untuk mencipta tapak web yang kelihatan hebat pada semua peranti, daripada desktop hingga telefon pintar. Kunci kepada reka bentuk responsif ialah menggunakan pertanyaan media, yang membolehkan anda menggunakan gaya berbeza berdasarkan saiz skrin atau ciri peranti.

Memahami Reka Bentuk Web Responsif

Reka bentuk web responsif memastikan tapak web anda menyesuaikan diri dengan pelbagai saiz skrin, memberikan pengalaman tontonan yang optimum untuk pengguna tanpa mengira peranti yang mereka gunakan. Pendekatan ini menghapuskan keperluan untuk tapak mudah alih dan desktop yang berasingan, memperkemas proses reka bentuk anda.

1. Mengapa Reka Bentuk Responsif Penting

• Pengalaman Pengguna: Meningkatkan kebolehgunaan dengan memastikan kandungan anda boleh diakses dan mudah dinavigasi pada mana-mana peranti.
• SEO: Google dan enjin carian lain mengutamakan tapak web mesra mudah alih dalam kedudukan carian.
• Kecekapan Kos: Menjimatkan masa dan sumber dengan mengekalkan satu tapak yang berfungsi merentas semua platform.

Pengenalan kepada Pertanyaan Media

Pertanyaan media adalah tulang belakang reka bentuk responsif. Ia membenarkan anda menggunakan peraturan CSS hanya apabila syarat tertentu dipenuhi, seperti apabila lebar skrin jatuh di bawah ambang tertentu.

1. Sintaks Asas

Pertanyaan media terdiri daripada jenis media dan satu atau lebih ungkapan yang menyemak keadaan, seperti lebar skrin.

• Contoh:

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

Pertanyaan media ini menukar warna latar belakang kepada biru muda pada skrin selebar 768 piksel atau lebih kecil.

2. Menggabungkan Pertanyaan Media

Anda boleh menggabungkan berbilang syarat untuk menyasarkan senario tertentu.

• Contoh:

  @media screen and (min-width: 600px) and (max-width: 1200px) {
    .container {
      padding: 20px;
    }
  }

Ini menyasarkan skrin antara 600px dan 1200px lebar, menggunakan padding pada kelas .container.

3. Titik Putus Biasa

Titik putus ialah titik di mana reka letak tapak web anda berubah berdasarkan saiz skrin.

• Titik putus biasa:
  • 320px: Peranti kecil (telefon pintar dalam mod potret)
  • 768px: Tablet
  • 1024px: Desktop atau tablet kecil dalam mod landskap
  • 1200px: Desktop besar

Membuat Reka Letak Responsif

Mari kita buat reka letak responsif ringkas yang melaraskan berdasarkan saiz skrin.

HTML:

<div class="container">
  <header>Header</header>
  <nav>Navigation</nav>
  <main>Main Content</main>
  <aside>Sidebar</aside>
  <footer>Footer</footer>
</div>

CSS:

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

.container {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-gap: 10px;
}

header, nav, main, aside, footer {
  padding: 20px;
  background-color: #f4f4f4;
  border: 1px solid #ddd;
}

/* Media Query for Tablets and Smaller Devices */
@media screen and (max-width: 768px) {
  .container {
    grid-template-columns: 1fr;
  }

  nav, aside {
    display: none; /* Hide navigation and sidebar on smaller screens */
  }
}

Dalam contoh ini:

• Reka letak menggunakan Grid CSS untuk mencipta reka letak dua lajur pada skrin yang lebih besar, dengan bar sisi bersebelahan dengan kandungan utama.
• Pertanyaan media pada 768px digunakan untuk bertukar kepada reka letak satu lajur, menyembunyikan navigasi dan bar sisi pada skrin yang lebih kecil.

Imej Responsif

Selain reka letak responsif, anda juga harus memastikan imej anda berskala sesuai pada peranti yang berbeza. Gunakan sifat lebar maks untuk menjadikan imej responsif.

• Contoh:

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

Ini memastikan imej tidak melebihi lebar bekasnya dan mengekalkan nisbah bidangnya.

Amalkan Senaman

1. Buat halaman web dengan reka letak berbilang lajur menggunakan Grid CSS.
2. Gunakan pertanyaan media untuk melaraskan reka letak bagi saiz skrin yang berbeza (cth., menyembunyikan elemen atau menukar nombor lajur).
3. Pastikan semua imej pada halaman responsif dengan menggunakan sifat lebar maksimum.

Seterusnya: Dalam kuliah seterusnya, kami akan meneroka Peralihan dan Animasi CSS, di mana anda akan belajar cara menambah kesan dinamik pada tapak web anda, menjadikannya lebih interaktif dan menarik. Nantikan!

ikuti saya di LinkedIn-

Ridoy Hasan

Atas ialah kandungan terperinci Reka Bentuk Web Responsif dengan Pertanyaan Media. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!