Buraya biraz geç geliyorum, o kadar itibar görmüyorum, sadece aşağıdaki cevapların bir karışımını yapıyorum çünkü bunu bir proje için yapmak zorunda kaldım.
Öyleyse soruyu cevaplamak için: Bu CSS özelliği diye bir şey yoktur . Nedenini bilmiyorum ama bence bu mülkün kötüye kullanılmasından korktukları için, ancak ciddi bir sorun olabilecek herhangi bir kullanım durumu bulamıyorum.
Her neyse, çözümler nelerdir?
İki araç bunu yapmamızı sağlayacak: medya sorguları ve vw özelliği
1) CSS'de istediğimiz her adım için bir medya sorgusu yapmaktan, yazı tipini sabit bir miktardan başka bir sabit miktara değiştirmekten oluşan "aptal" bir çözüm var. İşe yarıyor, ama yapmak çok sıkıcı ve pürüzsüz bir doğrusal yönünüz yok.
2) AlmostPitt'in açıkladığı gibi, minimumlar için parlak bir çözüm var:
font-size: calc(7px + .5vw);
Burada minimum, görünüm genişliğinin% 0,5'ine ek olarak 7 piksel olacaktır.
Bu zaten gerçekten harika ve çoğu durumda işe yarıyor . Herhangi bir medya sorgusu gerektirmez, sadece doğru parametreleri bulmak için biraz zaman harcamanız gerekir.
Bunun doğrusal bir fonksiyon olduğunu fark ettiğiniz gibi, temel matematik size parametreleri zaten iki noktanın bulduğunu öğrenir. Ardından, çok büyük ekranlar ve mobil sürüm için istediğiniz yazı tipi boyutunu piksel cinsinden düzeltin, ardından bilimsel bir yöntem yapmak isteyip istemediğinizi hesaplayın. Düşünce, kesinlikle gerekli değil ve deneyerek gidebilirsin.
3) Bir başlığın kesinlikle tek satır olmasını isteyen ve artık istemeyen çok sıkıcı bir müşteriniz olduğunu varsayalım (benim gibi). AlmostPitt çözümünü kullandıysanız, o zaman başınız belada çünkü yazı tipiniz büyümeye devam edecek ve sabit genişlikte bir kabınız varsa (1140px'de duran önyükleme veya büyük pencerelerde bir şey gibi). Burada ayrıca bir medya sorgusu kullanmanızı öneririm. Aslında, boyut istenmeyen hale gelmeden önce (pxMax) konteynırınızda işleyebileceğiniz maksimum piksel büyüklüğünü bulabilirsiniz. Bu maksimum değeriniz olacaktır. O zaman durdurmanız gereken tam ekran genişliğini bulmanız gerekir (wMax). (Doğrusal bir fonksiyonu kendi başınıza ters çevirmenize izin veriyorum).
Bundan sonra sadece yap
@media (min-width: [wMax]px) {
h2{
font-size: [pxMax]px;
}
}
O zaman tamamen doğrusaldır ve yazı tipi boyutunuz büyümeyi durdurur! Önceki css özelliğinizi (calc ...) wMax altındaki bir medya sorgusuna koymanıza gerek olmadığına dikkat edin, çünkü medya sorgusu daha önemsiz kabul edilir ve önceki özelliğin üzerine yazılır.
Bunun için bir pasaj oluşturmanın yararlı olduğunu düşünmüyorum, çünkü bunu tam ekrana yapmakta zorlanacaksınız ve sonuçta roket bilimi değil.
Umarım bu başkalarına yardımcı olabilir ve çözümü için AlmostPitt'e teşekkür etmeyi unutmayın.