Absolute vs. relative Einheiten in CSS

Apabila menggayakan elemen dalam CSS, anda mempunyai dua kategori unit untuk dipilih: unit mutlak dan unit relatif. Berikut ialah pecahan setiap satu daripadanya dan cara mereka berbeza:

---

1. Unit Mutlak

Unit mutlak ialah tetap unit ukuran. Mereka tidak dipengaruhi oleh elemen atau saiz skrin lain, bermakna saiznya adalah tetap tanpa mengira konteks di mana ia digunakan.

Unit Mutlak Sepunya:

• px (piksel): Piksel ialah segi empat sama kecil pada skrin. Ia adalah unit yang paling biasa digunakan untuk susun atur tetap.

  • Contoh:

  h1 {
    font-size: 24px;
  }
  

• pt (mata): Biasanya digunakan dalam media cetak, 1pt bersamaan 1/72 inci.

• cm (sentimeter) dan in (inci): Jarang digunakan dalam reka bentuk web, unit ini berdasarkan dimensi fizikal.

Kelebihan Unit Mutlak:

• Ketekalan: Saiz akan sentiasa sama, tidak kira peranti atau saiz skrin.
• Boleh Diramal: Sesuai untuk mencipta reka letak tetap yang anda mahu reka bentuk kelihatan sama pada semua platform.

Kelemahan:

• Kurang fleksibiliti: Unit mutlak tidak menyesuaikan diri dengan baik pada saiz skrin yang berbeza atau tetapan zum, menjadikannya kurang responsif.

---

2. Unit Relatif

Unit relatif adalah fleksibel dan skala berdasarkan konteks ia digunakan. Saiznya bergantung pada elemen lain, seperti bekas induk, ruang pandang atau saiz fon asas.

Unit Relatif Sepunya:

• em: Berbanding dengan saiz fon elemen yang digunakan padanya. Jika elemen induk mempunyai saiz fon 16px, 1em bersamaan dengan 16px. Jika saiz elemen induk berubah, begitu juga saiz dalam em.

  • Contoh:

  p {
    font-size: 1.5em; /* 1.5 times the font size of the parent */
  }
  

• rem (root em): Berbanding saiz fon elemen akar (biasanya elemen 100db36a723c770d327fc0aef2ce13b1). Ini menjadikannya lebih mudah dijangka berbanding dengan em.

Secara lalai, penyemak imbas biasanya menetapkan saiz fon akar kepada 16px, melainkan dinyatakan sebaliknya. Jika anda menentukan saiz fon tersuai untuk elemen, semua nilai rem akan dikira berdasarkan saiz baharu itu.

• Contoh:
  

  p {
    font-size: 2rem; /* 2 times the root font size */
  }
  

  • % (peratus): Berbanding dengan saiz elemen induk. Sebagai contoh, lebar: 50% menjadikan elemen 50% lebar bekas induknya.

• Contoh:
  

  div {
    width: 75%; /* 75% of the parent's width */
  }
  

  • vw (lebar port pandangan) dan vh (tinggi port pandangan): Unit ini adalah relatif kepada port pandangan penyemak imbas. 1vw ialah 1% daripada lebar viewport dan 1vh ialah 1% daripada ketinggian viewport.

• Contoh:
  

  div {
    width: 50vw; /* 50% of the viewport's width */
  }
  

Kelebihan Unit Relatif:

• Reka bentuk responsif: Skala unit relatif secara automatik berdasarkan saiz skrin, saiz fon atau dimensi bekas, menjadikan reka bentuk anda lebih fleksibel.
• Lebih mudah diselenggara: Menukar saiz fon elemen akar (menggunakan rem) boleh menskalakan keseluruhan reka bentuk anda.

Kelemahan:

• Boleh menjadi lebih sukar untuk dikawal: Tanpa pemahaman yang baik tentang warisan dan cara saiz mengalir melalui elemen, unit relatif kadangkala boleh menghasilkan hasil yang tidak dijangka.

---

Bila Menggunakan Unit Mutlak lwn Relatif

• Unit mutlak (seperti px) adalah yang terbaik apabila anda memerlukan ukuran yang tepat dan tetap. Gunakan ini apabila anda mahukan sesuatu saiz yang sama di semua tempat (cth., logo atau ikon kecil).
• Unit relatif (seperti em, rem, vw dan %) sesuai untuk reka bentuk responsif. Ia membenarkan elemen untuk menskala dan menyesuaikan diri berdasarkan saiz skrin atau elemen induk, menjadikan reka bentuk anda lebih fleksibel.

---

Contoh: Unit Mutlak lwn Relatif dalam Amalan

c9ccee2e6ea535a969eb3f532ad9fe89
  .absolute {
    font-size: 24px; /* Absolute unit */
  }

  .relative {
    font-size: 1.5rem; /* Relative unit */
  }

  /* Root font size: 16px */
  html {
    font-size: 16px;
  }
531ac245ce3e4fe3d50054a55f265927

6cc3d199fb0d3b69ec9c4f1fd2e76527This is 24px text473f0a7621bec819994bb5020d29372a
6906c154dadd704568546404f68e14a4This is 1.5rem text (24px based on root size)473f0a7621bec819994bb5020d29372a

Dalam contoh ini:

• Die absolute Schriftgröße (24px) bleibt immer gleich.
• Die relative Schriftgröße (1,5rem) wird basierend auf der Stammschriftgröße (16 Pixel) angepasst, was zu 24 Pixeln führt.

---

Fazit:

• Verwenden Sie absolute Einheiten, wenn geräteübergreifende Konsistenz erforderlich ist. Beachten Sie jedoch, dass diese nicht reagieren.
• Verwenden Sie relative Einheiten für flexiblere und reaktionsfähigere Designs, insbesondere bei der Entwicklung für mehrere Bildschirmgrößen und Geräte.

Das obige ist der detaillierte Inhalt vonAbsolute vs. relative Einheiten in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!