Css Ölçü Birimleri

CSS'de kullanılan ölçü birimleri, özellikle web tasarımında elementlerin boyutlarını, mesafelerini ve diğer özelliklerini belirtmek için kullanılır. İşte CSS'de sık kullanılan ölçü birimleri ve açıklamaları.

Piksel (px):

• Açıklama: Ekranın fiziksel piksellerini temsil eder. Sabit boyutlar için kullanılır.
• Örnek Kullanım: width: 200px;, padding: 10px;

Yüzde (%):

• Açıklama: Bir elementin üst öğeye göre oranını belirtir. Duyarlı (responsive) tasarımlarda sıklıkla kullanılır.
• Örnek Kullanım: width: 50%;, margin-top: 20%;

Em (em):

• Açıklama: Yazı tipi boyutuna göre göreceli bir birimdir. Elementin mevcut yazı tipi boyutuna bağlıdır.
• Örnek Kullanım: font-size: 1.2em;, padding: 1em;

Rem (rem):

• Açıklama: Kök (root) elementin yazı tipi boyutuna göre göreceli bir birimdir. Daha öngörülebilir ve yönetilebilir olması için tercih edilir.
• Örnek Kullanım: font-size: 1.5rem;, margin-bottom: 2rem;

Viewport Height (vh):

• Açıklama: Görüntüleme alanının yüksekliğine göre orantılı bir birimdir. Duyarlı tasarımlarda sıklıkla kullanılır.
• Örnek Kullanım: height: 50vh;, padding-top: 10vh;

Viewport Width (vw):

• Açıklama: Görüntüleme alanının genişliğine göre orantılı bir birimdir. Duyarlı tasarımlarda sıklıkla kullanılır.
• Örnek Kullanım: width: 80vw;, margin-left: 5vw;



Viewport Minimum (vmin) ve Viewport Maximum (vmax):

• Açıklama: vmin, görüntüleme alanının en küçük boyutuna göre (yükseklik veya genişlik) orantılıdır. vmax ise en büyük boyuta göre orantılıdır.
• Örnek Kullanım: height: 30vmin;, width: 70vmax;

Bu ölçü birimleri, elementlerin boyutlarını ve mesafelerini belirlerken farklı ihtiyaçlara ve ekran boyutlarına uygun esneklik sağlar. CSS'de bu birimleri doğru şekilde kullanarak, tasarımınızın hem masaüstü hem de mobil cihazlarda uyumlu olmasını sağlayabilirsiniz.

YAZAR HAKKINDA

26 Yaşında. Araştırmayı seven, bir şeyler öğretmeye meraklı bir Bilgisayar Mühendisi