Der ultimative Leitfaden zur Responsive Web-Entwicklung

pengenalan

Begini cara anda boleh memastikan reka bentuk anda kekal fleksibel dan kelihatan hebat pada mana-mana peranti. Mari kita lihat perkara utama yang perlu dipertimbangkan semasa membuat aplikasi web responsif.

Unit CSS

CSS menawarkan pelbagai unit, cukup sehingga kadangkala boleh mengelirukan untuk memilih yang betul.

• px: Unit berasaskan piksel kekal sama tanpa mengira saiz skrin.
• %: Unit berasaskan peratusan adalah relatif kepada saiz elemen induknya.
• vw dan vh: Unit berasaskan lebar/tinggi viewport adalah relatif kepada lebar/tinggi viewport.
• dvw dan dvh: Unit lebar dan ketinggian port pandangan dinamik adalah serupa dengan vw dan vh, tetapi ia melaraskan secara dinamik untuk perubahan dalam port pandangan, iaitu apabila papan kekunci pada skrin muncul.
• rem: Berbanding saiz fon elemen akar, menawarkan asas yang konsisten untuk penskalaan.
• em: Berbanding dengan saiz fon elemen semasa, berguna untuk penskalaan dalam komponen.
• calc(): Fungsi yang membolehkan anda melakukan pengiraan dengan unit yang berbeza. Contohnya, calc(100% - 20px) boleh membantu mencampurkan unit relatif dan mutlak.

Untuk senarai lengkap unit CSS (walaupun banyak yang jarang digunakan), lihat halaman Dokumen Web MDN ini.

Imej Responsif

Terdapat beberapa cara untuk meningkatkan responsif imej anda di web.

Menggunakan lebar dan tinggi: auto

Dengan menetapkan had lebar dan ketinggian maksimum kepada auto, kami boleh menjadikan imej kami responsif tanpa mengubah nisbah bidang imej.

img {
    width: 100%; /* or any fixed width */
    height: auto; 
  }

Gunakan lebar maks dan bukannya lebar jika anda mahu imej dikecilkan, tetapi jangan sekali-kali dinaikkan lebih besar daripada saiz asalnya.

Menggunakan elemen img dan srcset

Bagaimana jika anda memerlukan versi yang berbeza bagi imej yang sama untuk saiz atau resolusi port pandangan yang berbeza? tag dengan atribut srcset membolehkan penyemak imbas memilih imej yang paling sesuai untuk peranti secara automatik.
Sila ambil perhatian bahawa versi yang berbeza tidak bermaksud fail yang sama tetapi imej yang telah dilaraskan (cth., saiz semula, dimampatkan) agar sesuai dengan peranti yang berbeza.

<img src="small.jpg" 
     srcset="small.jpg 600w, medium.jpg 1200w, large.jpg 2000w"
     sizes="(max-width: 600px) 100vw, 
            (min-width: 601px) and (max-width: 1200px) 75vw, 
            (min-width: 1201px) 50vw" 
     alt="Example Image">

• Jika lebar port pandangan ialah 600px atau kurang, penyemak imbas akan menggunakan small.jpg dengan lebar 100vw. Penyemak imbas juga akan menggunakan small.jpg sebagai imej sandaran.
• Jika lebar port pandangan adalah antara 601px dan 1200px, penyemak imbas akan menggunakan medium.jpg dengan lebar 75vw.
• Untuk mana-mana lebar port pandangan melebihi 1200px, penyemak imbas akan menggunakan large.jpg dengan lebar 50vw.

Menggunakan elemen gambar dan srcset

Bagaimana jika anda memerlukan imej yang berbeza untuk saiz atau resolusi port pandangan yang berbeza? elemen dengan atribut srcset membolehkan anda mentakrifkan imej yang berbeza untuk saiz atau resolusi port pandangan yang berbeza.

<picture>
  <source srcset="small.jpg" media="(max-width: 600px)">
  <source srcset="medium.jpg" media="(max-width: 1200px)">
  <img src="large.jpg" alt="Example image">
</picture>

Dalam contoh ini:

• Jika lebar port pandangan ialah 600px atau kurang, penyemak imbas akan menggunakan small.jpg.
• Jika lebar port pandangan adalah antara 601px dan 1200px, penyemak imbas akan menggunakan medium.jpg.
• Untuk mana-mana lebar port pandangan melebihi 1200px, penyemak imbas akan menggunakan large.jpg.

Tipografi responsif

Unit relatif

html {
    font-size: 16px;
}
.parent {
    font-size: 2rem; /* 32px (2 * 16px) */
}
.child {
    font-size: 0.5em; /* 16px (0.5 * 32px) */
}

• Unit em adalah relatif kepada saiz fon elemen induk. Dalam contoh di atas, kelas kanak-kanak mempunyai saiz fon 16px kerana ia adalah separuh daripada saiz fon elemen induk, iaitu 32px.

• Unit rem adalah relatif kepada saiz fon elemen akar (html). Dalam contoh di atas, kelas induk mempunyai saiz fon 32px kerana ia adalah dua kali saiz fon akar, iaitu 16px.

Unit berasaskan viewport

h1 {
  font-size: 5vw;
}
h2 {
  font-size: 5vh;
}

• Unit vw adalah relatif kepada lebar port pandangan.
• Unit vh adalah relatif kepada ketinggian port pandangan.

Fungsi pengapit

Bagaimana jika anda perlu menggunakan unit relatif atau berasaskan port pandang tetapi dalam had minimum dan maksimum?
Sebagai contoh, saya mahu saiz fon saya relatif kepada lebar viewport, tetapi nilai minimum hendaklah 12px dan nilai maksimum hendaklah 48px. Fungsi pengapit ialah pilihan ideal untuk senario sedemikian.

h1 {
  font-size: clamp(12px, 3vw, 48px);
}

Reka letak responsif

Flexbox

Bagaimana jika anda perlu menyelaraskan item terutamanya dalam reka letak satu dimensi? (baris atau lajur)

<div class="card-container">
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
  <div class="card">Card 3</div>
</div>

.card-container {
  display: flex; /* Enable flexbox layout */
  justify-content: space-around; /* Space evenly between and around cards */
}
.card {
  background-color: black;
  border: 1px solid white;
  color: white;
  text-align: center;
  padding: 20px;
}

Baca lebih lanjut mengenai Flexbox di sini

Grid

Bagaimana jika anda perlu menyelaraskan item terutamanya dalam reka letak dua dimensi? (baris dan lajur)

<div class="card-container">
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
  <div class="card">Card 3</div>
  <div class="card">Card 4</div>
</div>

.card-container {
  display: grid; /* Enable grid layout */
  grid-template-columns: 1fr 1fr; /* Two equal columns */
  grid-template-rows: 1fr 1fr; /* Two equal rows */
  gap: 10px; /* Space between grid items */
  width: 100%; /* Full width of the container */
}
.card {
  background-color: black;
  border: 1px solid white;
  color: white;
  text-align: center;
  padding: 20px;
}

Baca lebih lanjut tentang Grid di sini

Pertanyaan Media

Bagaimana jika anda ingin menggunakan gaya tertentu apabila peranti memenuhi syarat tertentu? Selalunya, keadaan ini berkaitan dengan lebar peranti.

<div class="card-container">
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
  <div class="card">Card 3</div>
</div>

.card-container {
  display: flex;
  flex-direction: column; /* Default: single-column layout */
}

/* Media query for tablet devices (min-width: 768px) */
@media (min-width: 768px) {
  .card-container {
    flex-direction: row; /* Change to two-column layout */
  }
  .card {
    flex: 1; /* Equal width for all cards */
  }
}

/* Media query for desktop devices (min-width: 1024px) */
@media (min-width: 1024px) {
  .card {
    flex: 25%; /* Each card takes 25% of the width */
  }
}

Media queries can also be used with other characteristics, such as height, orientation, aspect-ratio, resolution, pointer, prefers-color-scheme, and display-mode.

Viewport Meta Tag

<meta name="viewport" content="width=device-width, initial-scale=1.0">

This tag is responsible for giving instructions to the browser on how to control the page's dimensions and scaling. The width=device-width part sets the width of the page to follow the screen width and initial-scale=1.0, which controls the zoom level when the page is first loaded.

Responsive frameworks and component libraries

If you don't want to reinvent the wheel, there are many responsive frameworks available to save time and effort.

• Bootstrap: A widely used framework with pre-designed components for quick responsive site development.

• Tailwind CSS: A utility-first framework that enables fast custom design with utility classes.

• MUI: A React library based on Material Design, offering responsive pre-styled components.

• ShadCN: Focuses on modern, accessible, and customizable responsive components.

• Ant Design: A comprehensive design system by Alibaba for enterprise applications, featuring responsive components.

Designing with a Mobile-First Approach

A mobile-first approach means starting with the design for smaller screens, like smartphones, and then gradually adding more features for larger screens, like tablets and desktops. This way, we ensure that the basic experience works great on mobile, and then you build on that for bigger devices.

.card-container { /* default code is for mobile view */
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  padding: 20px;
  gap: 12px;
}

@media (min-width: 768px) { /* queries/cases are for larger views */
  .card-container {
    flex-direction: row;
    gap: 18px;
  }
}

Das obige ist der detaillierte Inhalt vonDer ultimative Leitfaden zur Responsive Web-Entwicklung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!