Web Tasarımında Boyut ve Uzunlukları Belirleme - CSS Birimleri (%, em, rem, px, vh, vw)

Web Tasarımında Boyut ve Uzunlukları Belirleme - CSS Birimleri (%, em, rem, px, vh, vw)

846 A- A+
19 Mart 2024 Salı - 09:09 (2 Yıl önce) 3 dk okuma

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.

Alakalı İçerikler

  • Css
  • Web Yazılım
Yorumlar
Sende Yorumunu Ekle
Kullanıcı
0 karakter
Moderatör
Moderatör
621 Makale
Yazarın Diğer Etiketleri Tümünü Göster
Popüler Etiketler Tümünü Göster
Yazarın Diğer İçerikleri