Unit CSS – %, em, rem, px, vh, vw

Dalam CSS atau Cascading Style Sheets, terdapat banyak unit yang boleh mewakili nilai sifat yang berbeza dengan cara yang berbeza bergantung pada keperluan anda. Sifat CSS seperti: saiz fon, tinggi, lebar dan tinggi garis digunakan untuk menentukan sifat bekas yang berbeza. Nilai sifat ini boleh diberikan dalam unit yang berbeza.

Dalam artikel ini, kami akan melihat dengan lebih dekat unit CSS yang berbeza dan melaksanakannya secara praktikal untuk memahami penggunaan setiap unit.

Terdapat banyak unit CSS tersedia dalam CSS tetapi dalam artikel ini kita hanya mempelajari atau membincangkan sifat berikut -

• Pixel (px) - Unit piksel atau px ialah yang terkecil dan digunakan terutamanya oleh pemula untuk menetapkan nilai sifat panjang yang berbeza. Secara matematik, 1px ditakrifkan sebagai 1/96 inci, iaitu 1px = 1/96 inci.

Tatabahasa

Sintaks berikut akan menunjukkan kepada anda cara menetapkan nilai atribut panjang yang berbeza menggunakan unit piksel -

property_name: numeric_value px; 

• em - Atribut em digunakan untuk menetapkan nilai atribut panjang berbanding saiz fon elemen. Jika kita membandingkan em dengan piksel, maka kita melihat bahawa 1em adalah sama dengan 16px, iaitu 1em = 16px.

Tatabahasa

Sintaks berikut akan menunjukkan kepada anda cara menggunakan unit piksel untuk menetapkan nilai atribut panjang yang berbeza -

property_name: numeric_value em;

• rem - Atribut rem menetapkan nilai atribut berbanding saiz fon elemen akar dalam HTML (iaitu teg ). Jika kita membandingkan rem dengan piksel, maka kita dapati 1rem juga sama dengan 16px, iaitu 1rem = 16px.

Tatabahasa

Sintaks berikut akan menunjukkan kepada anda cara menetapkan nilai atribut panjang yang berbeza menggunakan unit piksel -

property_name: numeric_value rem;

NOTA - Adalah disyorkan untuk tidak menggunakan piksel, em dan rem sebagai unit semasa membangunkan halaman web atau aplikasi. Kerana, ia tidak akan membenarkan bekas dalam HTML menukar lebar dan ketinggiannya secara dinamik berdasarkan saiz port pandang sambil menjadikan halaman web responsif.

• Viewport-width (vw) - Atribut viewport-width atau vw digunakan untuk menetapkan nilai berdasarkan lebar viewport semasa pengguna yang melihat halaman web. Ia akan membenarkan bekas menukar lebarnya secara dinamik berdasarkan lebar paparan semasa halaman web.

Tatabahasa

Sintaks berikut akan menunjukkan kepada anda cara menggunakan unit piksel untuk menetapkan nilai atribut panjang yang berbeza -

property_name: numeric_value vw;

• Viewport-height (vh) - Ketinggian viewport atau vh hampir serupa dengan sifat lebar viewport. vw digunakan untuk menetapkan lebar dinamik elemen, dan vh digunakan untuk menetapkan ketinggian dinamik elemen. Setiap kali pengguna menukar ketinggian, ia secara dinamik menetapkan ketinggian elemen berbanding ketinggian paparan semasa.

Tatabahasa

Sintaks berikut akan menunjukkan kepada anda cara menggunakan unit piksel untuk menetapkan nilai atribut panjang yang berbeza -

property_name: numeric_value vh;

• Peratus (%) - Peratusan atau atribut % juga menetapkan nilai dinamik pada atribut yang ingin kami tetapkan kepada elemen dalam dokumen HTML. Daripada menggunakan tanda % yang berbeza untuk setiap harta seperti vw dan vh, kita boleh menggunakan tanda % yang sama untuk setiap harta untuk memberikan nilai kepadanya.

Tatabahasa

Sintaks berikut akan menunjukkan kepada anda cara menetapkan nilai atribut panjang yang berbeza menggunakan unit piksel -

property_name: numeric_value %;

Sekarang mari kita bincangkan setiap daripada mereka dan fahami perbezaan mereka dengan benar-benar melaksanakannya dengan bantuan contoh kod.

Langkah

• Langkah 1 - Dalam langkah pertama, kami akan menentukan elemen HTML yang berbeza untuk menetapkan sifat panjang yang berbeza menggunakan unit CSS yang berbeza.

• Langkah 2 - Dalam langkah seterusnya, kami akan mentakrifkan gaya elemen yang ditakrifkan dalam langkah sebelumnya di dalam elemen

  . /head> tag.

• Langkah 3 - Dalam langkah terakhir, kami akan menggunakan unit CSS yang berbeza untuk menetapkan nilai kepada sifat dan melihat perbezaan antara mereka.

Contoh

Contoh di bawah akan membantu anda memahami perbezaan antara semua unit CSS dan memahaminya secara praktikal -

<html>
<head>
   <style>
      .div1 {
         margin-top: 5%;
         width: 50%;
         height: 20%;
         background-color: aqua;
      }
      .div2 {
         margin-top: 5vh;
         width: 50vw;
         height: 20vh;
         background-color: aqua;
      }
      .para1 {
         font-size: 16px;
      }
      .para2 {
         font-size: 1.2em;
      }
      .para3 {
         font-size: 1.3rem;
      }
   </style>
</head>
<body>
   <h2>CSS units – %, em, rem, px, vh, vw</h2>
   <div class = "div1"> width: 50% <br> height: 20% </div>
   <div class = "div2"> width: 50vw <br> height: 20vh </div>
   <p class = "para1"> Paragraph with font-size: 16px </p>
   <p class = "para2"> Paragraph with font-size: 1.2em or 19.2px </p>
   <p class = "para3"> Paragraph with font-size: 1.3rem or 20.8px </p>
</body>
</html>

Dalam contoh di atas, kami menggunakan unit CSS yang berbeza untuk menentukan ketinggian, lebar dan saiz fon elemen.

Kesimpulan

Dalam artikel ini, kami mengetahui tentang unit CSS berbeza yang boleh digunakan untuk menetapkan nilai sifat panjang dalam CSS. Kami membincangkannya secara terperinci dengan melaksanakannya secara praktikal dengan bantuan contoh kod.

Atas ialah kandungan terperinci Unit CSS – %, em, rem, px, vh, vw. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!