Web tasarımında, sayfaların görünümünü ve düzenini belirlemek için çeşitli CSS birimleri kullanılır. Bu birimler, elementlerin boyutlarını, mesafelerini ve diğer özelliklerini belirtmek için kullanılır. CSS birimlerinin kullanımı, web tasarımının duyarlılığı ve esnekliği açısından kritiktir. Doğru birimi seçmek, sayfanın uygun görüntülenmesini sağlar ve kullanıcı deneyimini artırır.

1. % (Yüzde):

   • Belirli bir ölçümün yüzdesi olarak ifade edilir.
   • Yüzde birimi, bir öğenin bir ebeveyn öğeye göre oranını ifade eder. Örneğin, bir div'in genişliğini %50 olarak belirlemek, ebeveyn öğenin genişliğinin yarısı kadar genişlik sağlar.
   • Örneğin, bir div'in genişliğini belirli bir yüzdeye ayarlamak için:

     .div { width: 50%; /* Ekran genişliğinin yarısı kadar genişlik */ } 
     

     
      

2. em:

   • Ebeveyn öğenin font büyüklüğünün katları olarak belirlenir.
   • em birimi, bir öğenin font büyüklüğünün katları olarak belirlenir. Ebeveyn öğenin font büyüklüğüne göre bir öğenin boyutunu belirlemek için sıkça kullanılır.
   • Örneğin, ebeveyn öğenin font büyüklüğünün iki katı büyüklüğünde bir metin belirtmek için:

     .child { font-size: 2em; /* Ebeveyn öğenin font büyüklüğünün iki katı büyüklük */ } 
     

     
      

3. rem:

   • rem birimi, kök (root) elementin font büyüklüğünün katları olarak belirlenir. Bu, ölçümlerin kullanıcı tarayıcısındaki varsayılan font boyutlarına göre ayarlanmasını sağlar.
   • Örneğin, kök elementin font büyüklüğünün üç katı büyüklüğünde bir metin belirtmek için:

     .child { font-size: 3rem; /* Kök elementin font büyüklüğünün üç katı büyüklük */ } 
     

     
      

4. px (Piksel):

   • Sabit bir piksel değeri belirtir.
   • Piksel birimi, sabit bir piksel değeri belirtir. Örneğin, bir resmin genişliğini belirli bir piksel değerine ayarlamak için kullanılır.
   • Örneğin, bir resmin genişliğini belirli bir piksel değerine ayarlamak için:

     .image { width: 200px; /* 200 piksel genişlik */ } 
     

     
      

5. vh (Viewport Height):

   • Görüntüleyici penceresinin yüksekliğinin belirli bir yüzdesi olarak belirlenir. Bu, ekran boyutuna bağlı olarak öğelerin boyutunu belirlemek için kullanışlıdır.
   • Örneğin, görüntüleyici penceresinin %50'si kadar yükseklik belirlemek için:

     .section { height: 50vh; /* Görüntüleyici penceresinin %50'si kadar yükseklik */ } 
     

     
      

6. vw (Viewport Width):

   • Görüntüleyici penceresinin genişliğinin belirli bir yüzdesi olarak belirlenir. Bu, ekran boyutuna göre öğelerin genişliğini belirlemek için kullanılır.
   • Örneğin, görüntüleyici penceresinin %25'i kadar genişlik belirlemek için:

     .sidebar { width: 25vw; /* Görüntüleyici penceresinin %25'i kadar genişlik */ } 
     

Bu birimler, web tasarımında boyut ve uzunlukları belirlemek için temel araçlardır. Tasarımın gereksinimlerine ve duyarlılığına bağlı olarak, doğru birimi seçmek önemlidir.