CSS Matematik İşlevleriyle Duyarlı Web Tasarımı

[ByMoDuS]

HERAKLES Otomatik Avlı kalıcı sunucu. 19 Haziran'da açılıyor. Atius & Wizard güvencesiyle hemen kayıt ol, ön kayıt ödülleri aktif. HEMEN TIKLA!

CSS Matematik İşlevleriyle Duyarlı Web Tasarımı

CSS esas olarak bildirim seldir, ancak revizyonlar dile işlevler getirmiştir.

Artık spesifikasyonda birçok fonksiyon var ve en basit matematiksel olanlardan üçü çok faydalı olabilir: calc, max ve min.

CSS calc() Matematiksel Fonksiyon

CSS calc() işlevi basit bir hesaplama yapar ve sonucu bir özellik değeri olarak kullanır.

Bu, CSS @media sorguları olmadan yükseklik ve genişlik gibi özelliklere dinamik değerler atayabileceğiniz anlamına gelir.

Bu işlev, tek bir operatörle toplama (+), çarpma (*), çıkarma (-) ve bölmeyi (/) destekler.

Ekran Boyutları Arasında Eşit Aralık Oluşturma

Bir web sayfasının farklı boyutlarda aynı görünmesini sağlamak, vw ve % gibi dinamik CSS birimleri kullansanız bile zor olabilir.

CSS calc() işlevi bunu değiştirir.

Yukarıdaki resimde de görebileceğiniz gibi, ekran boyunca uzanan başlık çubuğu, ekran boyutuna bağlı olarak farklı aralıklara sahiptir.

Bunun nedeni, genişliği 80vw, aralığı 20vw olarak ayarlamış olmamızdır; değişken bir değer.

Bunun yerine calc() kullanırsak, aralığı herhangi bir ekran boyutunda aynı olacak şekilde ayarlayabiliriz. Bunun için kullandığımız özellik şöyle görünür:​

width: calc(100vw - 400px);​

Bu, başlık çubuğumuzun genişliğini sayfanın genişliğinden 400 piksel daha az olacak şekilde ayarlar.

Ekranın boyutu ne olursa olsun eşit boşluk oluşturur.

CSS max() Matematik Fonksiyonu​

CSS max() işlevi, bir CSS özelliğine değer eklemek için havuzdan en yüksek değeri seçer. Her biri bir virgülle ayırarak istediğiniz kadar potansiyel değer ekleyebilirsiniz, ancak yalnızca en yüksek değeri kullanır.​

Gezinme Çubuğu Yüksekliğini Kısıtlama​

Duyarlı web tasarımı ile gelen en önemli zorluklardan biri yönlendirmedir. Büyük bir portre bilgisayar monitöründe çalışan bir sitenin, daha küçük bir dikey mobil ekranda da iyi görünmesi gerekir. Bu, tıpkı yukarıdaki resimde gösterildiği gibi, bir mülk değerinin masaüstünde harika, mobilde kötü görünmesine neden olabilir. Gezinme çubuğumuzun ayarlanmış yüksekliği 10vh'dir, ancak bu, çubuğun masaüstü cihazlarda ince görünmesini sağlar. Bu sorunu çözmek için CSS max() işlevini kullanabiliriz:​

height: max(10vh, 80px);​

Böyle bir kural ekleyerek, gezinme çubuğumuz için minimum 80px yükseklik ayarlayabilirken, daha yüksekse 10vh değerini koruyabiliriz.

​

​

CSS min() Matematik Fonksiyonu​

​

min() işlevi max() işlevi gibidir, ancak özellik değeri olarak kullanmak üzere bir havuzdan en düşük değeri seçer.

Örnek: Maksimum Metin Boyutunu Ayarlama​

Dinamik bir değer kullansanız da kullanmasanız da, platformlar arasında metin boyutunu doğru bir şekilde elde etmek zor olabilir. Ana başlık metin boyutumuz için iki veya daha fazla potansiyel özellik değeri ayarlamak için CSS min() işlevini kullanabiliriz ve en küçüğünü kullanır. Yazı tipi boyutu kullanmak için 10vh; Örneğimizdeki ana başlık metnindeki özellik, metnin masaüstünde harika, ancak mobil cihazlarda çok büyük görünmesini sağlar. Bunu değiştirmek için alternatif boyutlandırma sağlamak üzere CSS min() işlevini kullanabilirsiniz:​

font-size: min(10vh, 10vw);​

Bu örnek, mobil ekranların uzun ve ince, masaüstü monitörlerin ise geniş ve kısa olması nedeniyle işe yarar.

Bu, görüş genişliği (vw) biriminin mobilde masaüstünden daha küçük olduğu anlamına gelir.​

​

​

 

[Kehanet]

Paylaşım için teşekkürler