(Html-Css Ders 27) HTML Em , Rem , Vh (Viewport-Height) , Vw (Viewport-Width) , Px Nelerdir ?

💬 Göreceği uzunluk birimleri değişkendir. Sayfa veya ekran boyutu vb. etkenlere göre değerleri değişen ölçü birimleridir. Yani 1920x1080 çözünürlüğe göre yapılmış bir ölçülendirme 1366x768 çözünürlükte açıldığı zaman yeniden ölçeklenecektir.

em: Üst elementin font boyutuna göre hareket eder ve M harfinin genişliğini ölçü için referans alır.
Örnek: font-size: 12px olan bir div nesnesi içerisindeki p etiketine font-size: 2em verirseniz, p etiketi 24px lik bir font boyutuna sahip olur.

ex: em birimiyle aynı mantıkta çalışır. Tek farkı küçük x harfinin yüksekliğini veya 1em’in yarısını ölçü için referans alır.

ch: em ölçü birimi gibidir font ailesindeki 0 sayısının genişliğini ölçü için referans alır.

rem:Root em olarak düşünebilirsiniz. em birimiyle aynı mantıkta çalışır. Tek farkı rem birimi html etiketini baz alarak çalışır.

Örnek: html etiketinin font-size değeri 12px olsun. h1 etiketine 2rem, h2 etiketine 1.5rem verirseniz. h1 etiketinin font-size değeri 24px olur, h2 etiketinin ise 18px olur.

vw: Viewport width. Pencerenin genişliğini % olarak baz alır.

Örneğin 1vw = tarayıcı penceresinin genişliğinin yüzde 1’i anlamına gelir. Aynı şekilde 50vw = tarayıcı penceresinin genişliğinin yüzde 50’si.

vh: Viewport height. vw biriminde olduğu gibi buda pencerenin yüksekliğini baz alır.

Örneğin 1vh = tarayıcı penceresinin yüksekliğinin yüzde 1’i. 50vh = tarayıcı penceresinin yüksekliğinin yüzde 50’sidir.

vmin: Tarayıcı penceresinin o anda vw veya vh uzunluklarından en küçük olanına göre değişir.

vmax: Tarayıcı penceresinin o anda vw veya vh uzunluklarından en büyük olanına göre değişir.

% :Yüzde. Üst elementi baz alır.

Örneğin 600px genişliğe sahip bir element içerisinde p etiketi ile yazdığınız yazıyı o elementin yarısına kadar göstermek istiyorsanız p tagına width:50% değeri verirsiniz. Veya 600px genişliğe sahip bir element içerisinde 2 tane kutu oluşturmak istiyorsanız içerisine 2 adet yeni element oluşturup bunların genişliklerine 50% verirsiniz böylelikle yan yana 2 element elde edersiniz.

🔔 Daha Fazla Türkçe Yazılım Eğitimi Videosu İçin Abone Olabilirsiniz

--------------------------------------------------------------------

emir özdemir html
html ve css site yapımı
css dersleri
css dersleri 1
xhtml ve css dersleri
xhtml (html) ve css dersleri (türkçe)
html ve css ile web sitesi yapımı
html dersleri 7
html ve css dersleri
html ve css ile site yapımı
html ve css ile web sitesi yapımı
html ve css ile kişisel web site yapımı
html ve css ile sıfırdan site kodlama
html ve css ile menü yapımı
html ve css nedir
html ve css ile web site yapımı
html ve css birleştirme
html ve css site yapımı
html ve css den sonra
xhtml (html) ve css ders
html ve css eğitimi
html dersleri css
html ve css ile web sitesi yapma notepad
html ve css ile oyun yapımı
html ve css kodları ile site yapımı
html ve css nasıl öğrenilir
html ve css ne işe yarar
html ve css ne kadar sürede öğrenilir
xhtml ve css dersleri
html ve css öğrenmek
html ve css öğrenme
html ve css öğren
html ve css öğrenmek ne kadar sürer
html ve css test soruları
html ve css tabanlı kişisel web sitesi yapımı
xhtml (html) ve css dersleri (türkçe)
css ve html
html ve css ile yapılmış site örnekleri
html dersleri
html css dersleri
html css
html5
html ile web sitesi yapımı
html5 dersleri
html css site yapımı
html site yapımı
html css javascript
html arka plan resmi yapma
html admin paneli yapımı
html and css
html arama motoru yapma
html arama kutusu yapımı
html and css website design
html ana sayfa yapma
html arka plana müzik ekleme
a html program
html iframe
html başlangıç
html buton ekleme
html basit site yapımı
html butona link verme
html button
html bootstrap
html button link verme
html başlangıç dersleri
html css js
html css javascript dersleri
html css js dersleri