CSS'de Clamp () Nedir (ve Nasıl Kullanılır)

Sitenizin hem telefonlarda hem de dev monitörlerde iyi görünmesini denediyseniz, aralık kırıldığını, yazı tiplerinin aşırı derecede küçüldüğünü veya aşırı ölçeklendirdiğini ve unsurların ezildiğini veya kaybolduğunu gördünüz. Tüm bunları düzeltmek için, bir düzen için uzun bir medya sorguları listesi yazıyorsunuz. Clamp () burada yardımcı olabilir.

Ayar boyutlarını basitleştiren bir CSS işlevidir. Sabit kesme noktalarında birden fazla değer tanımlamak yerine, ekran değiştikçe öğelerinizin akıcı bir şekilde ölçeklenmesi için minimum, tercih edilen ve maksimum ayarlamanızı sağlar. En iyi yanı, tanımlanmış sınırlarınızda kalmalarıdır, bu nedenle düzen tutarsızlıkları yoktur.

Bu yazıda, CLAMP () nasıl çalıştığını, neden medya sorgularından daha etkili olabileceğini ve Divi 5'in tek bir kod satırı yazmadan nasıl kullanmanıza izin verdiğini açıklayacağız!

Kelepçe nedir ()

CLAMP (), ekran boyutuna göre ayarlanan duyarlı değerleri tanımlamak için kullanılan CSS'de yerel bir işlevdir. Tek bir numarayı sabitlemek yerine, tarayıcıya çalışmak için bir aralık verirsiniz - minimum bir değer, ölçeklenebilir bir tercih edilen değer ve maksimum değer belirlersiniz. Bunlar, düzeninizi daha esnek hale getirir ve her ekran boyutu için birden fazla medya sorgusu yazmanız gerekmez.

Bunu, ekran boyutuna göre artan/azaltan bir sıvı yazı tipi boyutu örneği ile anlayalım.

font-size: clamp(40px, 7vw, 100px);

Burada, yazı tipi boyutu asla 40 piksel altına girmeyecek, görünüm portu genişliğinin% 7'sine göre ölçeklendirilmeyecek ve 100px'e ulaştığında büyümeyi durdurmayacak.

CLAMP () kullanmanın bir diğer büyük yararı, medya sorgularının aksine, sert sıçramaları önlemesi ve stillerinizi daha öngörülebilir ve okunabilir tutmasıdır.

Bununla ne demek istiyoruz? Bunu CLAMP () ile medya sorgularıyla karşılaştırarak anlayalım.

Clamp () ve Medya Sorgularını Karşılaştırma

Medya sorguları, farklı ekran genişlikleri için yazı tipi boyutlarını ayarlamanın bir başka yaygın yoludur. Burada, stillerinizin değiştiği belirli ekran genişliklerinde kesme noktalarını tanımlarsınız. Örneğin, masaüstü için bir yazı tipi boyutu, diğeri tablet için ve mobil için üçüncüsü, yazı tipi boyutu yalnızca ekran genişliği her kırılma noktasına çarptığında değişecek şekilde atayabilirsiniz.

Bu yöntem işe yarıyor, ancak akıcı değil. 1000 piksel ile 501px arasında, yazı tipi boyutu 100 pikselde kilitli kalır. Ekran 500px'e ulaştığında, yazı tipi aniden 30px'e düşer. Bu, düzgün bir geçiş, sadece keskin bir değişiklik anlamına gelir.

Dolayısıyla, ölçeklemeyi daha doğal hissettirmek istiyorsanız, birkaç kesme noktası eklemeniz ve her birinde yazı tipi boyutunu manuel olarak ayarlamanız gerekir. Bu, kodunuzu uzun ve şişkin hale getirir.

Buna karşılık, CLAMP () sizi ani geçişlerden ve uzun koddan kurtarır. Aslında, tek bir satırda yazılabilir: yazı tipi boyutu: kelepçe (30px, 7vw, 100px).

Bu, tarayıcıya, görünüm portu genişliğinin yüzde 7'sine göre 30px ve 100px arasında yazı tipini ölçeklendirmesini söyler. Yazı tipi boyutu, ani atlamalar veya birden fazla kesme noktasına ihtiyaç duymadan tüm ekran boyutlarında akıcı bir şekilde ayarlanır. Hala sınırları tanımlarsınız, ancak aradaki ölçekleme otomatik ve daha tutarlıdır.

Canlı aksiyonda, medya sorgu kırma noktalarının yazı tipi yeniden boyutlandırılması ile CLAMP () arasında bir karşılaştırma şu şekildedir:

Duyarlı yeniden boyutlandırma için CLAMP () belirgin bir fark yaratır. Stil değişikliklerini tetiklemek için sabit ekran genişliklerinin beklemek yerine, aradaki her piksele yanıt verir. Bu, kodunuzu daha temiz tutar ve tasarımınızı tüm cihazlarda daha tutarlı tutar. Bunun da ötesinde, çoğu modern tarayıcı tarafından yaygın olarak desteklenmektedir, bu da bu tarayıcılarda iyi işleyeceği anlamına gelir , bu da onu güvenilir ve pratik bir yedek haline getirir.

Kelepçe () perde arkasında nasıl işlev görür?

Clamp (), herhangi bir CSS özelliğini ölçeklendirmek için birlikte çalışan üç değer alır:

 clamp(minimum, preferred, maximum) 

İşlevin her bir bölümünün belirli bir rolü vardır:

• Minimum değer: Mümkün olan en düşük değer. Ekran ne kadar küçük olursa olsun, eleman bu noktanın altında ölçeklenmeyecektir.
• Tercih edilen değer: Bu değer ekran boyutuna göre ölçeklenir. Genellikle serbest akışkanlığa izin vermek için VW veya Calc () ifadesi gibi göreli birimler kullanılarak ayarlanır.
• Maksimum değer: İzin verilen en yüksek boyut. Çok büyük ekranlarda bile, öğe bu değeri aşmaz.

Tarayıcı son boyutu hesapladığında, önce tercih edilen değeri değerlendirir. Ekran boyutu tercih edilen değer minimumun altına düşecek kadar küçükse tarayıcı minimumu kullanır. Benzer şekilde, ekran tercih edilen değerin maksimum değeri aşacak kadar genişse, bununla yapışır.

Bu davranışı öngörülebilir hale getirir. Tasarımınızın tanımlanmış aralığınızda kalacağını her zaman biliyorsunuz, ancak bu sınırlar arasında esnek ölçeklendirme elde edersiniz. Minimum ve maksimum sınırlar ayarlayarak, CLAMP () elemanlarınızın akıcı bir şekilde ölçeklendirilmesini sağlar, ancak asla fazla fazla değildir. Sadece yeterince.

Tercih edilen doğru değeri seçmek

Tercih edilen değer (orta) tüm bunlarda daha büyük bir rol oynadığını fark etmiş olabilirsiniz. Elemanların nasıl ölçeklenmesine karar verir.

İlk olarak, kelepçe gibi sabit bir değer olmamalı (40px, 80px , 120px) çünkü bu durumda tercih edilen değer hiç ölçeklenmez. 80px zaten sınır arasına düştüğü için tarayıcı onu kilitler ve ekran boyutu değişikliklerini yok sayar. Bu, ilk etapta CLAMP () kullanma amacını yenen statik bir değerle sonuçlanır.

Bunun yerine, tercih edilen değer, kelepçede olduğu gibi her zaman göreceli olmalıdır (40 piksel, 7vw , 120px). Burada, 7VW, elemanın ekran boyutları arasında sorunsuz bir şekilde ölçeklenmesini sağlayan görünüm genişliğine yanıt verir. Kelepçe işlevi daha sonra asla 40px'in veya 120px'in üzerinden geçmediğini ve boyutu ekranın genişliğinin% 7'sine cevap vermesini sağlar.

Ayrıca göreceli değerin boyutunu da göz önünde bulundurmanız gerekir. Örneğin, 2VW gibi daha küçük bir değer, öğeyi ekran boyutları arasında kademeli olarak daha fazla ölçeklendirirken, 6VW gibi daha büyük bir değer daha hızlı ölçeklendirmeye neden olur ve maksimum boyuta daha erken ulaşır. Hangi ölçeklendirmenin sizin için çalıştığını belirlemek için sıvı tipi ölçek hesap makinesini deneyin. Farklı değerleri önizlemenizi ve kullanıma hazır CSS'yi dışa aktarmanızı sağlar.

Not: Sıvı Tipi Ölçek Hesap Makinesi VI değerleri çıktı. Üretilen çıktıyı Divi'de kullanıyorsanız, VI ünitelerini VW olarak değiştirdiğinizden emin olun.

Kelepçede farklı birim türleri ()

Clamp () içindeki birimler cihazlar arasında nasıl davrandığını etkiler. İşte kullanabileceğiniz tek şey:

Çoğu durumda, geliştiriciler minimum ve maksimum değerler için PX ve tercih edilen değer için VW gibi bir sıvı birimi kullanır. Bu, kontrol ve yanıt verme arasında en iyi dengeyi verir.

Bununla birlikte, Clamp (2REM, 4REM, 8REM) gibi min ve maksimum değerler için göreli birimleri de kullanabilirsiniz. Bu, kök yazı tipi boyutu değişirse tasarımınızı daha erişilebilir ve ölçeklendirmeyi kolaylaştırır. Özellikle tarayıcı ayarlarını okunabilirlik için ayarlayan kullanıcılar için kullanışlıdır.

Divi 5'te Clamp ()

CSS'deki CLAMP () işlevi inanılmaz derecede kullanışlıdır, ancak yalnızca rahat yazma kodu varsa. Bir stil sayfasına dokunmadan web sitelerini görsel olarak yapmayı tercih edenler ne olacak? CLAMP () kullanarak ancak kod yazmadan sıvı düzenleri oluşturmak ister misiniz?

Eğer öyleyse, Divi 5'in gelişmiş birimleri yardımcı olabilir.

YouTube kanalımıza abone olun

Uzun lafın kısası, Divi 5, inşaatçı boyunca gelişmiş bir birim olarak CLAMP () destekler ve bunlara erişmek çok kolaydır. Yazı tipi boyutu, boşluk veya bölüm genişliği gibi sayısal bir değer girebileceğiniz yere doğrudan CLAMP () kullanma seçeneğini bulacaksınız.

Divi 5'te bulunan farklı gelişmiş birimlerden seçim yapmak için giriş alanını tıklayın (başlık metni boyutunun yanındaki koyu renkli listeye bakın) , birim türünü değiştirin ve minimum, tercih edilen ve maksimum değerlerinizi tanımlayın.

Ve hepsi bu! Hiç kodlama veya CSS yok - tek yaptığınız bir CLAMP () değeri girmekti ve başlığınız tıpkı böyle sıvı oldu.

Divi 5, özel CSS yazmadan sıvı, duyarlı tasarımlar oluşturmayı kolaylaştırır. Görsel bir düzenleyicinin sadeliğiyle bir kelepçenin () tüm esnekliğini elde edersiniz. (Divi 5, CLAMP () dahil olmak üzere diğer birçok gelişmiş birimi destekler).

Divi 5'in gelişmiş birimleri hakkında her şeyi öğrenin

Divi 5'te CLAMP () nasıl kullanılır?

Şimdiye kadar, Divi 5'te CLAMP () kullanmanın ne kadar kolay olduğunu gördünüz. Sadece CLAMP () birimini seçip tercih ettiğiniz değerleri ekleyin. Özel kod yok, CSS dosyası yok, sadece temiz, görsel bir arayüz.

Ancak Clamp () 'ı gerçekten güçlü yapan şey, sadece işlevin kendisi değildir. Bununla birlikte çalışır.

Divi 5, modüler bir tasarım sistemi üzerine inşa edilmiştir. Bu, Düzeninizi sadece duyarlı değil, aynı zamanda tutarlı ve ölçeklendirmesi kolay hale getirmek için CLAMP () 'yi tasarım değişkenleri ve Calc () gibi CSS işlevleri gibi diğer gelişmiş özelliklerle birleştirebileceğiniz anlamına gelir. Ve burada ilginçleşiyor - Divi 5, Clamm () 'ı iş akışınıza takmayı kolaylaştırıyor.

CLAMP () Tasarım Değişkenleri ile Çalışır

Divi 5'te CLAMP () etkili bir şekilde kullanmanın en iyi, en etkili yolu onu tasarım değişkenleriyle birleştirmektir.

Tasarım değişkenleri, küresel değerleri (tipografi, renkler ve hatta yazı tipi boyutları gibi) tanımlamanıza olanak tanır, böylece bunları tutarlı tutmak için sitenizde kullanabilirsiniz. Ayrıca CLAMP () değerlerini sayı değişkenleri olarak da kaydedebilirsiniz. Bu, duyarlı küresel değerleri kaydetmenizi sağlar, böylece bunları değiştirdiğinizde, tüm örnekler bir kerede güncellenir.

Örneğin, H1-H6 başlıkları için Clamp () boyutlarını tanımlarsınız:

Ve onları Divi Builder'daki değişken yöneticinin içine kaydedin:

Ardından, web sitesi boyunca tüm başlıklarınız tanımlanmış Clamp () değerlerinize göre uyum sağlar.

Şimdi, H3 boyutunu güncellemek istiyorsanız, sayı değişkenini değiştirin ve kullandığınız her yerde güncellenecektir. ( Divi 5'te kendi tipografi sisteminizi oluşturmak istiyorum? İşte CLAMP () ve tasarım değişkenlerini kullanarak yazı tiplerini ve yazı tipi boyutlarını yönetme konusunda eksiksiz bir kılavuz.)

Bu yaklaşım merkezi kontrolü sağlar, bu da her bir örneği manuel olarak ayarlamadan tipografi ayarlarının küresel olarak güncellenmesini kolaylaştırır. Bu Clamp () değişkenlerini seçenek grup ön ayarları aracılığıyla uygulayarak, tasarım sürecinizi kolaylaştırırsınız.

CLAMP () Calc () ile birleştirir

Değerlerinizin nasıl ölçeklendiğini ince ayarlamak için CLAMP () içindeki Calc () işlevini de kullanabilirsiniz. Bu, özellikle bir temel boyut eklemek ve daha sonra VW gibi göreceli bir birimle daha hassas bir şekilde ölçeklendirmek istediğinizde kullanışlıdır.

Örneğin, yazı tipi boyutu: kelepçe (1REM, Calc (0.75REM + 2VW), 2.5REM) kararlı bir taban (0.75REM) eklemek ve daha sonra 2VW ile daha da ölçeklendirmek için Calc () kullanır.

Bu, yazı tipinin görünüm genişliğine göre ölçeklendirmesine izin verir, ancak aynı zamanda temel yazı tipi boyutuna sahip bir baş başlangıç ​​sağlar. Bu, birden fazla kelepçe varyasyonuna ihtiyaç duymadan daha küçük ekranlarda okunabilirliği korumak için kullanışlıdır. CLAMP () içindeki Calc () hilesi, işlerin nasıl ölçeklendiği üzerinde ekstra kontrolün istediğiniz her yer için mükemmeldir.

Kelepçe () pratik kullanım durumları

Şimdi bazı yaygın kullanım durumlarına () ve Divi 5 ile uyguladığınızda ne kadar kolay olacağına bakalım:

1. Tüm cihazlarda tutarlı başlık boyutları

Duyarlı tipografi, CLAMP () 'nin en iyi kullanım durumudur. Tasarım değişkenlerinde CLAMP () kullanarak başlık (H1-H6) boyutlarımızı zaten tanımladığımız için, onları hareket halinde görmenin zamanı geldi.

Bu sayfayı menü öğeleri için H5S kullanarak oluşturduk. Ardından, H5 sayı değişkenini H5'in başlık metin boyutlarının her birine uyguladık. Ve görebileceğiniz gibi, her bir başlık kesme noktalarında akıcı bir şekilde ölçeklenir.

Metin, tanımlanmış tüm duyarlı kırılma noktalarımızda net, dengeli ve görsel olarak tutarlı kalır.

Çizgi yüksekliği ve harf aralığı için CLAMP () kullanabilirsiniz. Ekran daha genişledikçe, hat boşluklarını veya aralığı hafifçe artırarak optimum okunabilirliği korumaya yardımcı olur. Küçük bir değişiklik, ancak uzun biçimli içeriği daha nefes alabilen hissettirir.

2. Büyük ekranlardaki paragraf bölümleri için Clamp () genişliğini ayarlayın

Kompakt ekranlardaki kısa çizgiler içeriği sindirilebilir hale getirdiğinden, paragrafların doğal olarak okunması kolaydır. Bununla birlikte, ultra geniş monitörlerde, tam genişlikte bir bölüm metni çok uzatırsa, okuyucular tüm yatay satırları taramak zorunda kalacaktır. Bir reklam panosu okumak gibi geliyor. Bir cümlenin ideal çizgi uzunluğu yaklaşık 50-75 karakterdir, bu nedenle web siteniz geniş bir ekranda sonsuz bir cümle gösteriyorsa, okuyucunun ilgisini kaybedebilirsiniz.

Bunu düzeltmek için, paragrafınızı sabit bir genişliğe (800 piksel) ölçeklendirmek için kelepçe (300 piksel, 65vw, 800px) gibi duyarlı bir genişlik ayarlayın, böylece paragraflar daha geniş ekranlarda bile okunabilir görünür.

Bu, blog yayınlarınızı daha geniş ekranlarda okunabilir hale getirmenin mükemmel bir yoludur.

3. Tek veya özellikli görüntüler için Clamp () genişliğini ayarlayın

Benzer şekilde, tek görüntüler (özellikli görüntüler gibi) ultra genişliğinde ekranlarda çok büyük görünebilir. Bir tablette mükemmel görünüyor, ancak içeriğin geri kalanına kıyasla aşırı güçlü hissedebilen 4K monitör üzerinde garip bir şekilde gerilebilir.

Bunu düzeltmek için kelepçe (300 piksel, 60vw, 1000px) gibi kelepçe tabanlı bir görüntü genişliği kullanın. Görüntünün ekran boyutu ile akıcı bir şekilde büyümesini, ancak düzene hakim olmadan önce durmasını sağlar.

Ya da, tüm öğelerin (görüntü, başlık ve metin) düzgün bir şekilde ölçülmesini sağlamak için tüm kap satırı için bir kelepçe () genişliği ayarlayabilirsiniz.

4. Sıvı dolgu ekleyin ve kelepçe () ile kenar boşluğu ekleyin

Tasarımcılar genellikle masaüstü için boşluğu doğru alırlar, ancak daha küçük veya çok büyük ekranlarda her zaman iyi çalışmaz. Sabit dolgu ve kenar boşlukları her zaman ekran boyutuna göre ayarlanmaz. Clamp () burada faydalı hale gelir.

Örneğin, bir görüntü galerisinde bir kelepçe (0.5REM, 2VW, 2REM) kenar boşluğu ve bir kelepçe (1REM, 3VW, 4REM) dolgu ekranla küçük ve ölçeklendiren alanlar oluşturun.

Düzen odanızın büyük ekranlarda nefes alması için verir ve işleri mobil cihazlarda sıkı tutar:

Clamp () ayrıca, özellikle sabit kesme noktası ayarlanmadan kasıtlı aralık istediğinizde, kart düzenleri, görüntü galerileri, bölüm kapları ve metin blokları etrafında sorunsuz bir şekilde ölçeklendirmeye yardımcı olur.

5. Sorunsuz bir şekilde ölçeklenen duyarlı kahraman bölümleri oluşturun

CLAMP () kullanarak, kahraman bölümlerinin kahraman başlığı, düğme dolgusu ve altyazı aralığını tanımlayarak her ekranda mükemmel görünmesini sağlayabilirsiniz. Uygulamalarını basitleştirmek için bu CLAMP () değerlerini tasarım değişkenleri olarak kaydettik. (Ancak her dakika detayını kaydederek değişken yöneticinizi doldurmak istemezsiniz.)

Bu değerleri uygulamak artık kolay.

Kaydettikten sonra, her biri kahraman bölümünüze her cihazda mükemmel bir ilk izlenim vermek için otomatik olarak ekran boyutuna uyum sağlayacaktır.

Tek bir kod satırı yazmadan CLAMP () kullanarak piksel mükemmel düzenler tasarlayın

Clamp (), sonsuz medya sorgularına güvenmeden sıvı, duyarlı düzenler tasarlamanıza yardımcı olur. Ve Divi 5 ile, onu kullanmak için tek bir kod satırı yazmanıza gerek yoktur. Kodlamayı tercih edin veya görsel tasarımın tadını çıkarın, Divi'nin gelişmiş birimleri yazı tiplerine ve boşluğu kolaylaştırır.

Clamp () gibi güçlü özelliklerle kolayca erişilebilir, Divi 5'i kendiniz denemek istemez misiniz? Farklı değerleri test edin, kendi duyarlı sisteminizi oluşturun ve düzenlerinizin ne kadar esnek olabileceğini görün. Ve favori bir kelepçe () hileniz olduğunda, aşağıdaki yorumlarda paylaşın! Ne yarattığınızı görmek isteriz.