Nasıl oluşturulur: Yanıtlayıcı metin

Yanıtlayıcı yazı boyutu

Metin boyutu, vw Birim ayarı, "Görüntü genişliği" anlamına gelir.

Bu şekilde, metin boyutu tarayıcı penceresinin boyutuna takip eder:

<h1 style="font-size:8vw;">Hello World</h1>
<p style="font-size:2vw;">Tarayıcı penceresinin boyutunu ayarlayın, yazı boyutunun nasıl ölçeklendiğini görün.</p>

Kişisel olarak deneyin

Açıklama:Görüntü genişliği, tarayıcı penceresinin boyutudur.1vw = Görüntü genişliğinin %1. Eğer görüntü genişliği 50 santimetre ise, 1vw 0.5 santimetre için.

Yazı boyutunu medya sorgusu ile değiştir

Ayrıca, belirli ekran boyutlarındaki öğelerin yazı boyutunu değiştirmek için medya sorgularını kullanabilirsiniz:

Etkiyi görüntüle

/* Eğer ekran genişliği 601px veya daha fazlaysa, <div>'nın font-size'ını 80px'e ayarlayın */
@media screen and (min-width: 601px) {
  div.example {
    font-size: 80px;
  }
}
/* Eğer ekran genişliği 600px veya daha azsa, <div>'nın font-size'ını 30px'e ayarlayın */
@media screen and (max-width: 600px) {
  div.example {
    font-size: 30px;
  }
}

Kişisel olarak deneyin

İlgili sayfalar

Eğitim:CSS yazı tipi

Eğitim:CSS medya sorgusu