CSS Matematik İşlevleriyle Duyarlı Web Tasarımında Ustalaşma

Matematik iyidir, matematik harikadır, ancak stil sayfanız sizin için yapabilirken zamanınızı hesaplamalar yaparak harcamak ister misiniz?

CSS, web sitelerinizi tasarlama şeklinizi değiştirecek üç kullanışlı matematik işleviyle birlikte gelir. Bunları nasıl ve neden kullanmanız gerektiğini size göstereceğiz.

Math'ı CSS'ye Tanıtma

CSS esas olarak bildirimseldir, 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.

Kullanabilirsiniz bu basit CodePen örneği rehberle birlikte takip etmenize yardımcı olmak için.

CSS calc() Matematiksel Fonksiyon

CSS calc() işlevi basit bir hesaplama yapar ve sonucu bir özellik değeri olarak kullanır. Bu, yükseklik ve genişlik gibi özelliklere dinamik değerler atayabileceğiniz anlamına gelir. CSS @medya sorguları.

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

Örnek: 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:

genişlik: hesap (100vw - 400 piksel);

Bu, başlık çubuğumuzun genişliğini sayfanın genişliğinden 400 piksel daha az olacak şekilde ayarlar ve 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.

Örnek: 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 10vh olarak ayarlanmış bir yüksekliği vardır, ancak bu, çubuğun masaüstü cihazlarda ince görünmesini sağlar.

Bu sorunu çözmek için CSS max() işlevini kullanabiliriz:

yükseklik: maks (10vh, 80 piksel);

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 boyutunun doğru alınması 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.

kullanma yazı tipi boyutu: 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:

yazı tipi boyutu: 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.

Duyarlı Web Tasarımı için Matematik Kullanımı

CSS ile önceden paketlenmiş olarak gelen matematik işlevleri, kolaylıkla duyarlı web siteleri oluşturmak için benzersiz bir yol sunar. Başlamak için bunları doğru şekilde ayarlamanız yeterlidir.

Elbette, platformlar arasında harika görünen bir site yapmak için kullanabileceğiniz başka yöntemler ve CSS işlevleri de var.

HTML ve CSS Kullanarak Duyarlı Gezinme Çubuğu Nasıl Oluşturulur

Sonrakini Oku

Yazar hakkında