Akıllı düzenler oluşturmak için divi 5'te min () ve max () kullanma

CSS Min () ve Max (), duyarlı web tasarımında çok yönlü ancak az kullanılan işlevdir ve Divi 5, gelişmiş birimler güncellemesinden bu yana her ikisi için de tam desteğe sahiptir. Daha önce CLAMP () ve Calc () ile dinamik hesaplamalar ile sıvı tipografisini araştırmış olsak da, min () ve maks (), duyarlı tasarım elde etmek için daha basit yollar sunar.

Bu yazıda, bu işlevleri Divi kullanarak nasıl kullanacağınızı göstereceğiz (Divi 5, mevcut siteler için geçiş önerisiyle yeni web sitelerinde kullanmaya hazırdır). Duyarlı işlevleri kullanmak için yapabileceğiniz her şey medya sorgularına bağımlılığınızı azaltacaktır, CSS güzel bir şeydir!

CSS min () ve maks (): Daha basit mantıkla daha akıllı düzenler

Clamp () zaten keşfettiyseniz, Masting Min () ve Max () 'nin yarısındasınız! Hatırlıyorsanız, Clamp () aynı anda üç değer kullanır (min, tercih edilen ve maks), Clamp () 'de Min ve Max aynı kavramdır, ancak belirli bir zamanda mantığın sadece 1/3'ü ile.

Min () ve max () ne yapar?

Min () ve maks () işlevleri, en küçük (min) veya en büyük (maks) ekran boyutuna göre görüntülenen iki veya daha fazla değer ayarlamanıza izin verir.

“Geçiş noktası”, belirlediğiniz iki değerle ilgili olarak belirlenir, bu nedenle bu yalnızca görselleştirme amaçları içindir

min (): her zaman daha küçük değeri seçer

Geniş ekranların içeriği aşırı germesini önlemek için min () kullanın. Bu, büyük ekranlarda çok genişlememesi gereken, ancak ekran boyutları küçüldükçe aşağı ölçeklendirme konusunda bol miktarda esnekliğe sahip olması gereken düzenler için idealdir.

 width: min(100%, 500px); 

Bu örnekte, elemanın genişliği asla 500 pikselden geçmeyecek, ancak bu 500 piksel işaret altındaysa% 100 olacaktır.

max (): her zaman daha büyük değeri seçer

İçeriğin çok dar veya küçük olmasını önlemek için, özellikle daha küçük ekranlarda veya içeriğin okunaklı veya işlevsel kalması için minimum boyuta ihtiyaç duyduğunda Max () kullanın. Bu, küçük ekranlardaki (sabit bir değer) belirli bir noktanın ötesine geçmemesi gereken, ancak daha büyük alanları (göreceli değere sahip) barındırabilecek düzenler için idealdir.

 width: max(80%, 300px); 

Bu örnekte, elemanın genişliği her zaman daha büyük seçenek olacaktır: kabının% 80'i veya 300 piksel. Daha küçük ekranlarda veya sıkı kaplarda,% 80'i 300 pikselden daha az bir fiyata hesaplanırsa, eleman hala en az 300 piksel genişliğinde olacaktır. Daha büyük ekranlarda, eleman kabın genişliğinin% 80'ine genişleyecektir, ancak asla 300 pikselin altına küçülecektir. Bu yaklaşım, elementin küçük ekranlarda kullanılabilir kalmasını sağlamaya yardımcı olurken, daha büyük olanlarda duyarlı bir şekilde ölçeklendirilir.

Neden göreli ve sabit değerleri min () ve maks () ile birleştirmelisiniz?

CSS'de Min () veya Max () ile ilk karşılaştığınızda, neden değerleri yüzde ve piksel gibi birleştirdiklerini merak edebilirsiniz. Bunun nedeni, her birim tipinin duyarlı tasarımda farklı bir rol oynamasıdır.

Örneğin, min (100px, 200px) her zaman 100 piksel olarak çözülecektir. Sadece iki sabit değerin en küçüğünü seçiyor. Ancak Min (% 100, 500 piksel) gibi birimleri karıştırdığınızda, tarayıcıya şöyle diyorsunuz: “Hangisini ebeveynin genişliğinin% 100'ü ile 500 piksel arasında daha küçük kullanın.” Bu onu duyarlı hale getirir.

%, VW ve EM gibi göreceli birimler, ister ana öğe, görünüm portu veya kalıtsal yazı tipi boyutları olsun, bağlama göre ayarlanır. PX gibi sabit birimler CSS'de sabit kalır ve bunları öngörülebilir hale getirir.

Sabit ve göreceli değerleri birleştirerek, min () ve maks (), boyut sınırlarını zorlarken uyarlayan esnek tasarımlar oluşturmanıza izin verir.

Divi ile min () ve maks () nasıl kullanılır

Artık Min () ve Max () 'nin temellerini ele aldığımıza göre, bazı örnekleri tartışalım.

1. Daha az alanlı duyarlı satır genişlikleri

Divi ile konteyner elemanlarında her zaman bir genişlik ve maksimum genişlik ayarlayabilirsiniz. Ancak Min () ve Max () gibi CSS işlevlerini açarak aynı şeyi yapabilirsiniz, ancak daha az tasarım alanı kullanabilirsiniz (ve sayfanızda da biraz daha az CSS çıkarın).

Divi'de, bir öğeye (bizim durumumuzda bir satır), tasarım sekmesine ve ardından boyutlandırmaya giderseniz, genişliği ayarlamak için birkaç seçenek bulacaksınız. Genişliği% 95 yaparak ve maksimum genişliği 900 piksel olarak ayarlayarak, mobil cihazlarda iyi görünen, aynı zamanda masaüstü ekranlar için solda ve sağda çok fazla negatif alana sahip bir düzen verir.

Bu, satırlar için böyle CSS kullanmak gibidir:

 .container {
width: 95%;
max-width: 900px;
} 

Divi 5'in gelişmiş birimleriyle, artık daha konsolide başka bir seçeneğiniz var. İhtiyacınız olan her şeyi yalnızca genişlik alanına girebilir ve aynı sonucu elde edebilirsiniz.

Bu, bu CSS'yi satır kabında kullanmak gibidir:

 .container {
width: min(95%, 900px);
} 

İki satıra karşı bir satır CSS. Daha da önemlisi, hem genişlik hem de maksimum genişlik ayarlamak yerine min () her kullandığınızda bir daha az adım ve değer gerektirir. Her iki seçenek de bu videoda gösterilenle aynı sonuca ulaşır:

Bu özel kullanım durumu o kadar heyecan verici değil, ancak Min () ve Max () 'nin gücünü ve eski CSS bildirimlerinin yerini nasıl değiştirebileceğini gösteriyor.

Aralık, boyutlandırma veya sınırlar için min () veya max () kullanırken (Divi 5'teki daha fazla alanda kullanılabilirler), bunları seçenek grup ön ayarlarına veya eleman ön ayarlarına ayarlamanızı şiddetle tavsiye ederim. Bu şekilde, nerede kullanırsanız kullanın tutarlı ölçeklendirme alabilirsiniz.

2. Satır dolgusu ve sınır genişliği

Aşağıda, ekran boyutları büyüdükçe daha fazla iç dolgu ve daha büyük bir sınır genişliğini garanti eden bir tasarımım var. Bunu karşılamak için, bir satırda sağ/sol/üst/alt sınır genişliği ve dolgu ayarlamak için max () işlevini kullandım. CSS şöyle bir şey olurdu:

 .container {
padding: max(10px, 2vw) max(10px, 2vw) max(10px, 2vw) max(10px, 2vw);
border-width: max(5px, 1vw) max(5px, 1vw) max(5px, 1vw) max(5px, 1vw);
} 

Bu, Max () işlevinin, hangi durumda uygulandığında hangisinin daha büyük olduğunu seçeceği anlamına gelir. Her iki taraftaki en küçük dolgu 10 piksel ve en büyüğü 2VW'dir. Benzer şekilde, sınır genişliği için, şimdiye kadarki en küçük olan 5px ve en büyüğü 1VW).

İşte bu durumda Max () Divi'deki satırda tasarım> aralık> dolguda nasıl görünüyor:

İşte bu durumda Max () Divi'deki satırdaki tasarım> sınır>sınır genişliğindebenzeri görünen şey:

Birlikte, satırın içinde daha az dolgu ve daha küçük ekranlarda daha ince bir sınır genişliğine sahip olma etkisini alıyorum. Ancak ekran boyutları büyüdükçe ve VW değeri (unutmayın, göreceli bir değerdir) sabit piksel değerinden daha büyük hale geldikçe ölçeklenir.

Bu, daha küçük ekranların kullanılabilirliğini en üst düzeye çıkarmaya yardımcı olurken, daha geniş ekranlar alanı daha fazla doldurabilir.

3. Tam Yükseklik Kahraman Bölümleri

Bir bölümün yüksekliğindeki min () değerini kullanarak, en azından belirli bir yükseklik olan ancak aksi takdirde basit bir min () işlevini kullanarak tam ekran yüksekliğinin% 90'ına (ve daha fazlasını) uyan bir kahraman bölümü oluşturabilirsiniz.

 height: min(800px, 90vh) 

Bu, daha büyük (daha uzun) ekranlar dışında tam bir kahraman bölümüne sahip olma etkisine sahiptir, bu da altındaki bir sonraki bölümü gösterecektir. Divi boyutlandırma ayarlarında, bu iki farklı alan girişi (genişlik ve maksimum genişlik) ile yapılabilir, ancak Min () işlevini kullanarak, aynı etkiyi boyutlandırmada yalnızca bir alanı kullanarak elde edebiliriz.

Kahraman bölümünü çoğu ekran boyutu için ana şey olarak tutar, ancak daha uzun ekran çözünürlükleri ile birkaç durumda çok büyük olmaz.

4. Yazı tipi boyutlandırma

Yazı tipi boyutları için Min veya Max kullanmak, statik piksel değerlerinden daha dinamik boyutlandırmanıza yardımcı olabilir. Bunun için, ekran boyutu koşullarına göre yazı tipi boyutunu ölçeklendirmek için max () kullanmak istersiniz. Piksel/REM değerini kullanmak istediğiniz küçük mutlak boyuta ayarlayın ve yukarı doğru ölçeklendirmek için göreceli bir değer kullanın.

1REM, kök yazı tipi boyutuna eşittir (site stillerinizde özelleştirilmedikçe genellikle 16px); Maks (1REM, 2VW) yazı tipi boyutu iki değerden daha büyük olur ve asla 16 pikselden daha küçük olmaz.

Gördüğünüz gibi, en küçük cihazlarda yazı tipi boyutu 1REM/16 piksel olarak ayarlanır. Belli bir noktada, daha büyük değer 2VW olur ve yazı tipi boyutunu yukarı doğru ölçeklendirir, ekran boyutları büyüdükçe yazı tipini büyütür.

Yazı tipi boyutlandırması için min veya max kullanmanızı tavsiye etmiyorum, bunun yerine CLAMP (). Min/Max size yalnızca dinamik ölçeklendirme sağlar ve CLAMP () 'nin etkisine yaklaşmak için, min/maks.

Min ()/max () ve clamp () arasındaki fark

Clamp () 'nin Min () ve Max ()' nin aralarında tercih edilen bir değerle bir kombinasyonu olarak anlayabilirsiniz. Clamp () minimum kapak için bir değer, maksimum kapak olarak bir değer ve MIN ve maks.

Bir örnek:

 font-size: clamp(16px, 4vw, 40px); 

Bu, ayarladığınız yazı tipi boyutunun asla 16px'den daha küçük veya 40 pikselden daha büyük olmayacağı anlamına gelir. Ancak, değiştirdiği oran (ekran boyutuna göre) merkezdeki tercih edilen değere göre belirlenir.

Sizin için Clamp () işlevlerinizi oluşturan tercih ettiğim sıvı tipografi jeneratörünü görmek için CLAMP () kullanma konusundaki özel makalemi okuyun.

Divi 5 ile min () ve maks () deneyin

Min () ve maks () CLAMP () veya Calc () kadar dikkat çekmeyebilir, ancak Divi 5'te daha akıllı, daha basit ve daha temiz duyarlı tasarımlar için temel araçlardır.

Bu CSS işlevleri, web sitenizin duyarlılığını kontrol etmek için size benzersiz yollar sunar. Min () ve maks () ne zaman kullanacağınızı anladıktan sonra, duyarlı tasarımı onlarsız nasıl yönettiğinizi merak edeceksiniz. Modern tarayıcılarda tamamen desteklenirler ve Divi bunları doğrudan uygulamayı sağlar. Divi 5 yeni web sitelerinde kullanılmaya hazırdır.