Nasıl Yapılır - Duyarlı Metin
CSS ile duyarlı tipografi oluşturmayı öğrenin.
Selam Dünya
Yazı tipi boyutunun nasıl ölçeklendiğini görmek için tarayıcı penceresini yeniden boyutlandırın.
Duyarlı Yazı Tipi Boyutu
vw
Metin boyutu , "görünüm alanı genişliği" anlamına gelen bir birim ile ayarlanabilir .
Bu şekilde metin boyutu tarayıcı penceresinin boyutunu takip edecektir:
Örnek
<h1 style="font-size:8vw;">Hello World</h1>
<p
style="font-size:2vw;">Resize the browser window to see how the font size
scales.</p>
Görünüm alanı, tarayıcı penceresi boyutudur. 1vw = görünüm alanı genişliğinin %1'i. Görünüm alanı 50cm genişliğindeyse, 1vw 0,5cm'dir.
Medya Sorgularıyla Yazı Tipi Boyutunu Değiştirin
Belirli ekran boyutlarında bir öğenin yazı tipi boyutunu değiştirmek için medya sorgularını da kullanabilirsiniz:
Değişken Yazı Tipi Boyutu.
Örnek
/* If the screen size is 601px wide or
more, set the font-size of <div> to 80px */
@media screen and (min-width:
601px) {
div.example {
font-size: 80px;
}
}
/* If the screen size is 600px wide or less,
set the font-size of <div> to 30px */
@media screen and (max-width: 600px) {
div.example {
font-size: 30px;
}
}
İpucu: Yazı tipleri hakkında daha fazla bilgi edinmek için CSS Yazı Tipi Eğitimimize gidin .
Medya sorguları hakkında daha fazla bilgi edinmek için CSS Medya Sorguları Eğitimimizi okuyun .