Divi'de CSS Uzunluk Birimlerini Anlama ve Uygulama Kılavuzu

Divi ile bir web sitesi tasarlarken, boyutla ilgili birçok karar vermeniz gerekir. Bu, bir satırın genişliği, bir yazı tipinin boyutu veya bir modüle ne kadar dolgu ekleneceği olabilir. İşleri daha da zorlaştırmak için tüm cihazlara uygun boyutlara karar vermeliyiz.

CSS dünyasında, bir elemanın boyutu (veya uzunluğu) uzunluk birimleri ile ifade edilir. Uzunluk birimleri, bir elemanın uzunluğunu belirlemek için bir sayı değerini (10px, 2em, %100, vb.) izleyen küçük harfler/sembollerdir.

Her zaman uzunluk birimlerini kullanırız. Divi, süreci çok daha kolaylaştırmış olsa da, uzunluk birimleri hala günlük web sitesi tasarlama işinin bir parçası. Bu yüzden bugün size Divi ile doğru uzunluk birimlerini anlamanıza ve uygulamanıza yardımcı olacak bir rehber vermeye çalışacağım.

Bu yazıda, uzunluk birim değeri kullanan aşağıdaki öğeleri ele alacağım:

• Genişlik
• marj
• Dolgu malzemesi
• Sınır
• Metin (yazı tipi boyutu, harf aralığı, satır yüksekliği)

Uzunluk Birimlerine Hızlı Genel Bakış

Uzunluk birimleri genellikle iki ana kategoriye ayrılır: mutlak ve göreli.

Mutlak Uzunluk Birimleri

Mutlak uzunluk birimleri, başka herhangi bir öğeye göreli olmadıkları için mutlak olarak kabul edilir. Bu birimler tarayıcı boyutuna ölçeklenmeyecek ve her zaman aynı boyutta kalacaktır. Bunlar aşağıdakileri içerir:

pt – puan
piksel – piksel
inç
cm – santimetre
mm – milimetre
bilgisayar – pika

Pikseller, web için kullanmayı düşünmemiz gereken tek mutlak CSS uzunluk birimidir. Diğerleri çoğunlukla fiziksel (dijital değil) ölçüm (baskı gibi) için kullanılır. Piksel birimi, cihaz ekranınızın bir "noktasının" boyutunu ifade eder (bu, her cihaza göre biraz değişir). Bu nedenle, pikseller yaygın olarak tarayıcı boyutlarıyla ölçeklenmesi gerekmeyen şeyler için kullanılır.

Göreli Uzunluk Birimleri

Göreceli Uzunluk birimleri, diğer öğelerin uzunluğuna bağlı olarak değiştiği/ölçeklendiği için göreli olarak kabul edilir. Yaygın bir örnek, ana öğenin uzunluğuna bağlı olan yüzdedir.

em – öğenin yazı tipi boyutuna göre
rem – kök elemanın yazı tipi boyutuna göre
vw – tarayıcınızın görüntü alanı genişliğinin %1'ine göre
vh – tarayıcınızın görüntü alanı yüksekliğinin %1'ine göre
vmin – iki tarayıcı görüntü alanı boyutundan (yükseklik veya genişlik) daha küçük olanın %1'ine göre.
vmax – iki tarayıcı görüntü alanı boyutundan (yükseklik veya genişlik) daha büyük olanın %1'ine göre.
% – ana öğenin genişliğinin 1/100'üne göre.

Bu birimlerin tümü web için kullanılır. Bu gönderi için rem, vmin veya vmax üzerinde yoğunlaşmayacağım çünkü bunlar daha az yaygınlar ve Divi ile pek iyi çalışmıyorlar. Her ne kadar önerilen kullanım durumlarını duymayı çok isterim.

Divi'nin Kutu Boyutlandırması

Divi, border-box CSS özelliği ile kutu boyutunu belirler. Bu temelde bir bölümün, satırın veya modülün genişliğinin ve yüksekliğinin içeriğinin, dolgusunun ve kenarlığının toplamı tarafından belirlendiği anlamına gelir. Divi ile web siteleri oluşturduysanız, bunun nasıl çalıştığını zaten biliyorsunuzdur. Bir satırı bir kutu olarak düşünün.

1000 piksel genişliğinde bir satır oluşturduğunuzu varsayalım. Satıra içerik eklemek (diğer kutular/modüller gibi) satırın genişliğini değiştirmez. Satıra dolgu eklemek de satırın genişliğini değiştirmez, ancak kutunun içine uygulanır. Satıra bir kenarlık eklerseniz, kenarlık da kutunun içine uygulanır ve ayarlanan genişliği etkilemez. Diğer bir deyişle, satırınızın çevresine 10 piksellik bir kenarlık eklemeniz satırınızın 1020 piksel genişliğinde olmayacağı gibi, 50 piksel sağ ve sol dolgu eklemek 1100 piksellik bir satırla sonuçlanmayacaktır. Değişecek tek şey, daha fazla içerik dolgusu veya kenarlık ekledikçe yüksekliktir. Kenar boşluğu, kutunun dışına boşluk ekleyen ve sayfadaki kutuları (bölümler, satırlar ve modüller) ayırmak için kullanılan şeydir.

Bundan bahsediyorum çünkü Divi'nin nasıl çalıştığının yapı taşını (veya kutularını) anlamak yardımcı olur, böylece sayfanızdaki öğelere uzunluk birimi değerleri (30px, 5em, %50 vb.) eklemenin gerçekte ne işe yaradığını bilirsiniz.

Genişlik

Önerilen Uzunluk Birimleri: %, vw ve px (maksimum genişlik olarak)

Genişlik özelliği, bir öğenin genişliğini ayarlamak için uzunluk birimlerini kullanır.

Divi, herhangi bir bölümün, sıranın veya modülün genişliğini kolayca ayarlamanıza olanak tanır.

Genişlik için px kullanma

Mobil için gerekli kesme noktalarında bu genişliği ayarlamayı planlamıyorsanız, nadiren bir öğeyi piksel genişliğine ayarlamanız gerekir. Bu, duyarlı, uyarlanabilir ve akıcı tasarım dünyasında iyi bir uygulama değildir. Bununla birlikte, genişlik bir yüzde olarak ayarlandığı sürece, bir piksel değeri kullanarak bir maksimum genişlik ayarlamak yararlıdır. Bu konuda daha sonra.

Duyarlı Tasarım için Maksimum Genişliği Ayarlamak için % ve px kullanma

Bildiğiniz gibi Divi, herhangi bir modülün, satırın veya bölümün genişliğini ayarlamanıza olanak tanır. Bu genişlik, varsayılan olarak yüzde birimiyle ayarlanabilir, ancak bir piksel birimi değeri de girebilirsiniz. Ancak genişlik değeri seti teknik olarak maksimum genişliktir. Gerçek gerçek css genişliği %100'dür. Tüm bölümler, satırlar, sütunlar ve modüller, tümü div blok öğesi kullanılarak oluşturulduğundan, doğal olarak %100 genişliktedir. Ve blok elemanları her zaman kabın tam genişliğini (%100 genişlik) kapsar.

Ne biliyorsun… Divi, Div'ler ile oluşturulmuştur.

İşte küçük bir test. Sol sütundaki bu metin modülü için modül genişliğini 1000 piksele güncelleyelim. Modüle kolay tanınması için gri bir arka plan verdim.

Teknik olarak maksimum genişlik olduğu için aslında tam 1000 piksele gitmediğine dikkat edin. Ancak, varsayılan %100 genişliği geçersiz kılmak ve gerçek genişliği 1000 piksel olarak bildirmek istersem, gelişmiş sekmeye gidebilir ve ana öğeyi 1000 piksel genişliğe ayarlayabilirim.

Şimdi modüle bakın.

Sorun, göreceli değerlere sahip öğelerle çevrili mutlak bir değer kullanmanızdır. Yani tarayıcınızı küçültseniz bile modül 1000 piksel olarak kalacaktır.

Bu nedenle Divi, gerçek genişlik yerine öğelerinizin maksimum genişliğini ayarlar.

Duyarlı siteler oluşturmak için pikselleri göreli uzunluk birimleriyle (yüzde gibi) birlikte kullanmak yaygındır. Divi, tüm sayfalarınızın içerik genişliğini ayarlamak için bu yöntemi kullanır. Tema Özelleştirici > Genel Ayarlar > Düzen Ayarları'na giderseniz, ana içerik genişliğinin 1080 piksel olarak ayarlandığını göreceksiniz.

1080 piksel aslında içeriğiniz için maksimum genişliktir. Gerçek css genişliği %80'dir. Bu nedenle tarayıcınızın genişliğini artırdığınızda, içerik genişliği 1080 pikselde genişlemeyi durduracaktır. Tarayıcı genişliğini 1080 pikselin altına düşürürseniz içerik, ana öğenin %80'ine göre ölçeklenmeye devam eder.

Divi Builder'da Özel Genişlik Değerleri Ekleme

Divi oluşturucuyu kullanırken, satırlarınız web sitesi içeriği olarak kabul edilir ve varsayılan olarak %80 genişlik ve 1080 piksel maksimum genişlik ayarını devralır. Özel bir genişlik ayarlayarak Divi Builder'ı kullanarak bir satırın genişliğini değiştirirseniz, yüzde veya piksel değeri olarak ayarlanmış olmasına bakılmaksızın yeni genişlik değeri maksimum genişlik olacaktır.

Bir satırı tam genişlik olarak değiştirirseniz, hem genişlik hem de maksimum genişlik %89 olarak ayarlanır. Bu, satırın her zaman tarayıcı penceresinin %100'ü olan ana öğenin (bölüm) %89'una sahip olacağı anlamına gelir.

Kısacası, Divi oluşturucu bölümlerinizin, sıralarınızın veya modüllerinizin genişliğini ayarlarken maksimum genişliği otomatik olarak kullanacak kadar akıllıdır.

Genişliği Ayarlamak için vw'yi Kullanma

Görüntü Alanı Genişliği (vw), yüzde değerine çok benzer. Aradaki fark, vw değerinin her zaman tarayıcı görünüm alanı/pencere genişliğine göre olmasıdır. Yüzde değeri her zaman ana öğeye göredir. Bölümlerinizi 100vw'ye (özel css'de) ayarlamaya dikkat edin, çünkü bu, sayfayı aşağı kaydırırken görünen kaydırma çubuğunun ötesine geçmekle ilgili bazı sorunlara neden olabilir.

Divi yüzde genişlikleri üzerine kurulu olduğundan, vw gerektiren özel bir tasarım oluşturmadığınız sürece, yüzde değerlerine bağlı kalırdım.

marj

Önerilen Uzunluk Birimleri: px, % ve vw

Kenar boşluğu özelliği, öğenin dışına boşluk eklemek için uzunluk birimlerini kullanır. Pozitif ve negatif değerler kullanarak bir elemanı konumlandırmak için de kullanışlıdır.

Divi, herhangi bir bölümün, satırın veya modülün kenar boşluğunu ayarlamanıza olanak tanır.

Kenar Boşlukları için px kullanma

Farklı ekran boyutları için belirli uzunluk değerleri atamadığınız sürece, bu uzunluk değerlerinin farklı ekran boyutlarınıza göre ayarlanamayacağını anladığınız sürece, kenar boşlukları ve/veya dolgu için piksellerin kullanılması uygundur.

Sol veya sağ kenar boşluğu için piksel kullanmaktan kaçının

Genel olarak, özellikle sol ve sağ kenar boşlukları için kenar boşluklarını ayarlamak için piksel kullanmaktan kaçınmak isteyeceksiniz. Kenar boşlukları için mutlak bir uzunluğa sahip olmak, içeriğinize göre düzgün bir şekilde ölçeklenmez ve sonuçta sizi belirli tarayıcı genişliklerinde istediğinizden daha fazla veya daha az kenar boşluğu ile bırakır. Tasarım amaçları için mutlak marjlara sahip olmak isteyeceğiniz istisnalar vardır. Gerektiğinde mobil cihazlar için kenar boşluğu uzunluğunu ayarladığınızdan emin olun.

Üst ve alt kenar boşluğu için piksel kullanma

Kenar boşluğu için piksel kullanmanın oldukça yararlı olduğu zamanlar vardır. Örneğin, bir sayfada bir öğeyi yukarı veya aşağı taşımak istiyorsanız, öğeye pozitif veya negatif bir piksel değeri vermek, o öğeyi dikey olarak kesin bir konumda taşımanıza olanak tanır. Bunun için bir yüzde kullanacak olsaydınız, tarayıcı genişliğini değiştirdikçe öğe yukarı veya aşağı hareket eder.

Marjlar için Yüzde Kullanımı

Kenar boşlukları için yüzde kullanmak, duyarlı siteler oluşturmanın harika bir yoludur. Daha önce belirtildiği gibi, yüzde değerleri, ana öğelerin uzunluğuna göredir. Divi, sütunlar arasında boşluk oluşturmak için sağ kenar boşluğu için yüzdeleri kullanır. Bu marj yüzdesi, satır ayarlarındaki oluk genişliği değiştirilerek kolayca ayarlanabilir. Oluk genişliği temel olarak sütunlarınız arasında istediğiniz kenar boşluğu yüzdesidir.

Oluk genişliği 3 olarak ayarlandığında, sütunlar arasındaki kenar boşluğu %5,5'tir. Tarayıcı genişliğini ayarlarken alanın nasıl ölçeklendiğine dikkat edin.

Bu nedenle, bir modülün sağ veya sol kenar boşluğunu ayarlamanız gerekirse, işleri uygun şekilde ölçeklendirmek için yüzdeleri kullanmanın en iyisi olacağını unutmayın.

Nesneleri Yatay Olarak Konumlandırmak için Yüzde Marjını Kullan

Bazen belirli yaratıcı tasarımlar, nesneleri üst üste getirmek veya asimetrik tasarımlar oluşturmak için soldan sağa hareket etmeyi gerektirir. Bu durumda, sağ veya sol kenar boşluğu için negatif bir yüzde değeri kullanabilirsiniz. Bu, nesneyi hareket ettirecek ancak yine de tarayıcı genişliklerine göre ayarlanacaktır.

Burada, bir görüntüyü başka bir görüntüyle kaplamak için yüzde değerlerinin kullanılmasına bir örnek verilmiştir. Yatay konumlandırma için yüzde değerlerinin kullanımına ve üst ve alt konumlandırma için piksel kullanımına dikkat edin. Bunun nedeni, yüzde değerinin ana öğenin (sütun) genişliğine göre olmasıdır. Bu nedenle, %30'luk bir üst kenar boşluğu koyarsanız, sütun genişliği değiştikçe görüntü yukarı ve aşağı hareket ederdi. Bu nedenle, çoğu durumda, pikseller gibi mutlak uzunluk değerine sahip dikey öğeleri konumlandırmak isteyeceksiniz.

Özel Marj için vw ve vh kullanma

Yüzdeler gibi, vw ve vh uzunluk birimleri de bölümler, satırlar veya modüller arasında tarayıcı görünüm alanınıza göre ölçeklenecek şekilde kenar boşlukları eklemeye yardımcı olabilir. Aradaki fark, vw ve vh'nin her zaman ana öğeye değil (yüzdeler gibi) görünüm alanı boyutuna göre olmasıdır.

Dolgu malzemesi

Önerilen Uzunluk Birimleri: px, %, em, vw ve vh

Divi, bölümler, satırlar, sütunlar ve modüller için dolguyu özelleştirmenize olanak tanır.

Dolgu için piksel kullanma

Hemen hemen her şey için pikselleri dolgu olarak kullandığım bir zaman vardı. Ancak, kendime geldim. Kenar boşluğu gibi, tarayıcı boyutu ne olursa olsun mutlak bir dolgu uzunluğuna sahip olmak istiyorsanız, dolgu için pikselleri kullanabilirsiniz. Ancak genellikle dolgu, tarayıcının boyutuna göre ölçeklendirilmelidir. Bunun yerine, dolgu için yüzdeleri kullanmanızı öneririm.

Duyarlı web tasarımında, tarayıcının genişliği değişirken öğeler arasında tutarlı bir dikey boşluk sağlamak amacıyla üst ve alt dolgu için piksellerin kullanılması yaygındır. Divi bunu Bölümler ve Satırlar için yapar. Tema Özelleştirici altında (1-10) seçtiğiniz bölüm veya satır yüksekliğine bağlı olarak, bölüm ve/veya satırlarınız daha fazla veya daha az üst ve alt dolguya sahip olacaktır.

Ancak CSS'ye bakarsanız, üst ve alt dolgunun belirli bir kesme noktasında bir yüzde değerine ve diğerleri için bir piksel değerine ayarlandığını fark edeceksiniz. Örneğin, daha büyük ekran genişliklerinde (1350 pikselden büyük) varsayılan bölüm yüksekliğini 4 değerinde bırakırsanız, üst ve alt dolgu 54 piksel olur. 980px-1350px arasındaki ekran genişliklerinde, üst ve alt dolgu %4'e (kesit genişliğinin %4'ü) ayarlanır. 980 pikselden küçük ekran boyutlarında, üst ve alt dolgu 50 piksele ayarlanmıştır. Bu teknik, iki uç arasındaki aygıtlar için yüzde değeriyle doldurma ölçeğine sahipken, akıllı telefon için minimum dolgu değeri ve büyük monitörler için maksimum dolgu değeri ayarlamak için harikadır.

Dolgu için % Kullanımı

Bazen, belirli kesme noktalarında herhangi bir ek değer eklemeye gerek kalmadan işlerin güzel bir şekilde ölçeklenmesini sağlamak için dolgu için bir yüzde değeri (piksel değil) kullanmak çok daha kolaydır. Ve önemli içeriği "ekranın üst kısmında" tutmakla ilgilenenler için, üst ve alt dolgu için pikseller yerine yüzdeleri kullanmak bu işlemi basitleştirmeye yardımcı olacaktır.

Burada üst dolgusu 50 piksele ayarlanmış bir bölüm örneği verilmiştir. Bölümler arasında çok fazla boşluk olduğundan, aynı 50 piksel dolgunun akıllı telefonlarda masaüstünde olduğu kadar iyi görünmediğine dikkat edin.

Burada üst dolgusu %4 olarak ayarlanmış bir bölüm örneği verilmiştir. Masaüstünden akıllı telefona ne kadar iyi ölçeklendiğine dikkat edin. 1920 piksel genişliğindeki bir tarayıcı penceresinde üst dolgu 76 pikseldir (0,04 kez 1920). Ancak tarayıcı penceresini 375 piksel genişliğe kadar küçülttüğünüzde, %4 dolgu 15 piksele (0,04 çarpı 375) eşittir.

NOT: Üst ve alt yüzde değerlerinin her zaman öğenin yüksekliğine değil genişliğine göre olacağını unutmamak önemlidir.

Dolgu için em kullanma

Dolgu için em uzunluk değerini kullanmak şaşırtıcı derecede faydalıdır. Masaüstü için 22 piksel, tablet için 18 piksel ve akıllı telefon için 14 piksel gövde metin boyutuna sahip bir metin modülünüz olduğunu varsayalım. 1em, masaüstünde 22 piksele, tablette 18 piksele ve akıllı telefonda 14 piksele eşit olacaktır. Benimle kal. Metin modülü için 2em'lik bir dolgu eklemek, metin boyutuna göre ayarlanacaktır. Masaüstünde dolgu 44 piksel olacaktır çünkü 2em 2 çarpı 22 piksel olacaktır. Tablette dolgu 36 piksel olacaktır. Ve akıllı telefonda dolgu 28 piksel olacaktır. Bu, duyarlı tasarım için gerçekten iyi çalışan yazı tipi boyutuna göre dolguyu ölçeklendirmeye yardımcı olur.

Dolgu için vh ve vw kullanma

Doldurma için vh ve vw'yi yüzdeyle aynı şekilde kullanabilirsiniz. Aradaki fark, vh ve vw'nin
her zaman görünüm alanı boyutuna göre. Yüzde her zaman ana öğeye göredir.

Bu örnekte, bölümdeki ve satırdaki tüm dolguyu çıkardım ve her metin modülüne aşağıdaki dolguyu verdim:

2vh Üst, 5vw Sağ, 2vh Alt, 5vw Sol

Tarayıcı yüksekliğini ayarlamanın her modülün üst ve alt dolgusunu nasıl azaltacağına veya artıracağına dikkat edin.

Sınırlar

Önerilen Uzunluk Birimleri: px, em ve vw

Kenarlıklar için piksel kullanma

Kenarlıklar için piksellerin kullanılması oldukça yaygındır ve kenarlığın ana yazı tipi boyutuna (em) veya tarayıcı görünüm alanına (vh,vw) göre ölçeklenmesini istemiyorsanız önerilir.

Kenarlıklar % birimini desteklemiyor

Yukarıdaki başlıkta yüzde seçeneğini bir seçenek olarak eklemediğimi fark etmiş olabilirsiniz. Bunun nedeni, yüzde değerinin kenarlıklar için desteklenen bir birim olmamasıdır. Ancak diğer göreli uzunluk birimlerini (em,vh,vw) kullanarak kenarlıklarınızı ölçeklendirebilirsiniz.

Kenarlıklar için em kullanma

Kenarlıklar için em kullanmak, metin modüllerinin etrafında dolgu kullanma fikrine benzer. em değeri, ana yazı tipi boyutuna göre olacak ve yazı tipi boyutu değiştikçe ayarlanacaktır.

İşte 1em kenarlıklı bir metin modülü örneği. Ayrıca modüle 1em'lik bir dolgu veriyorum. Yazı tipi boyutunu ayarladığınızda ne olduğuna dikkat edin. Yazı tipi boyutu arttıkça ve azaldıkça kenarlık (ve dolgu) değişecektir.

Bu aynı zamanda düğme kenarlıkları ile de çalışır. Burada, kenarlık genişliği 0,5em olan bir düğme örneği verilmiştir. Düğme metninin boyutuyla nasıl ölçeklendiğine dikkat edin.

Kenarlıklar için vw ve vh kullanma

Kenarlık genişliğinizi tarayıcı görünümünüzün boyutuna göre ölçeklendirmek istiyorsanız, vw veya vh uzunluk birimini kullanabilirsiniz. Bunun çok yapıldığını görmedim, ama düşünmek ilginç.

Metin

Önerilen Uzunluk Birimleri: px, em ve belki vw

Divi Builder Metninizi özelleştirmek için özel uzunluk değerleri eklemenizi sağlar. Bu seçenekler metin boyutunu, harf aralığını ve satır yüksekliğini içerir.

Bu metin seçenekleri için herhangi bir CSS uzunluk değerini kullanabilirsiniz, ancak bu yazı için en yaygın olanları ele alacağım – px, em ve vw.

Metin Boyutu için px kullanma

Yazı tipi boyutlarınızı bir piksel değerine ayarlamak yaygındır çünkü bu boyutların tutarlı kalmasını istersiniz. Medya sorgularını kullanarak yazı tipi boyutunu tarayıcı genişliğine göre değiştirebilirsiniz. Divi, tüm Divi modüllerine üç farklı cihaz yazı tipi boyutu girmenize izin vererek bunu gerçekten kolaylaştırır.

Harf Aralığı için px kullanma

Harf aralığı için px kullanmak yaygındır. Yazı tipi boyutunu cihazlar arasında önemli ölçüde değiştirmeyi planlıyorsanız, muhtemelen harf aralığını da ayarlamanız gerekeceğini unutmayın. Harf aralığını metin boyutunuzla ölçeklenebilir hale getirmek için bunun yerine em uzunluk değerini kullanabilirsiniz.

Satır Yüksekliği için px kullanma

px birimi satır yüksekliği için en iyi seçenek değildir çünkü yazı tipi boyutunu her değiştirdiğinizde satır yüksekliğini değiştirmek güçleşir. Bu nedenle em normalde kullanılır (bununla ilgili daha fazla bilgi daha sonra).

Yazı tipi boyutları için em kullanma

Özel yazı tipi boyutları için em kullanabilirsiniz. 1em değeri, en yakın ebeveyn etiketinin yazı tipi boyutuna eşit olacaktır. Bir modüldeki bir metin öğesine em değeri eklerken, en acil ana etiket yazı tipi boyutu, tema özelleştiricide ayarladığınız şeydir. Divi'de, vücut yazı tipinizi 16 piksele ayarladıysanız, 1em 16 piksele, 2em 32 piksele eşittir vb.

Satır Yüksekliği için em kullanma

Diyelim ki bir metin modülü kullanıyorsunuz ve gövde yazı tipini 18 piksel olarak değiştiriyorsunuz. em her zaman en yakın üst etikete göre olduğundan, o modül için em değeri değişir ve şimdi 1em 18 piksele eşittir. Bu, Divi'nin neden satır yüksekliğini bir em uzunluk değerine ayarladığını anlamanıza yardımcı olur. 18 piksellik metin yazı tipinizi 1,5em değerine ayarlamak, satır yüksekliğini 27 piksele (1,7 kez 18 piksel) ayarlar. Bu nedenle, yazı tipi boyutunu daha sonra değiştirmeye karar verirseniz, em satırı yüksekliği buna göre ayarlanacaktır.

Harf aralığı için em kullanma

Harf aralığı için em kullanmak faydalı olabilir ve kesinlikle tavsiye ederim. Harf aralığı için em kullanmanın temel nedeni, metninizin boyutuna bağlı olarak boşluğun artması ve azalmasıdır.

Aşağıdaki resimdeki harf aralığına bakın. Başlık metninin boyutunu değiştirdiğinizde 5 piksel harf aralığının nasıl değişmediğine dikkat edin.

Şimdi harf aralığı için 0.1em kullanarak aynı örnek metne bakın. Yazı tipi boyutu 50 piksel ise, 0.1em 5 piksele eşit olacaktır. Ancak yazı tipi boyutunu 25 piksele düşürürseniz, 0.1em 2.5 piksele eşit olur.

Metin Öğeleri için rem kullanma

Her zaman kök yazı tipi boyutuna göre olduğundan, rem kullanmak genellikle em kullanmaktan daha öngörülebilirdir. Html etiketinizdeki kök öğe. Bu, tüm web sitenizi saran etikettir. Divi'de html aslında %100 yazı tipi boyutuna sahip olacak şekilde ayarlanmıştır. Bu biraz garip görünebilir. Yani, tam olarak neyin %100'ü? Aslında, bu oldukça yaygın bir uygulamadır. Bunu bilmiyor olabilirsiniz ama root/html yazı tipi boyutunuzu %100 olarak ayarlamak, tarayıcınızla aynı yazı tipi boyutunu bildirmenin bir yoludur. Çoğu tarayıcının varsayılan yazı tipi boyutu 16 pikseldir, bu nedenle Divi'de 1rem değeri aslında 16 pikseldir (veya tarayıcı ayarlarınızda ayarlanan yazı tipi boyutu). Tema özelleştiricide varsayılan gövde metni olarak belirlediğiniz şey bu değil.

Örneğin, bir metin modülünün gövde metni boyutuna 1rem eklediğimde ne olduğuna dikkat edin. Metnin boyutu aslında 14 pikselden (tema özelleştiricide tema gövdesi yazı tipi olarak ayarladım) 16 piksele (varsayılan tarayıcı yazı tipi boyutum) çıkıyor.

Şimdi tarayıcı yazı tipi boyutumu daha büyük bir şeyle değiştirirsem, o metin modülündeki metin de artacaktır.

Bu nedenle, kullanıcıların tarayıcı ayarlarına göre ayarlanan bir metne sahip olmakla ilgileniyorsanız, rem değeri yardımcı olabilir. Ancak, Divi Teması'nın temel çerçevesini değiştirmeye başlamak istemiyorsanız (yani kök yazı tipi boyutunu başka bir şeyle değiştirmek istemiyorsanız), çoğunlukla Divi'de rem kullanmak, değerinden daha fazla sorun olacaktır.

Metin Öğeleri için vw'yi kullanma

Bu belki de metin için kullanılacak en ilginç uzunluk değeridir. Buradaki olasılıklar hakkında çok fazla ayrıntıya girmeyeceğim, ancak sizi bu fikirle tanıştıracağım.

Yazı tipi boyutu için vw kullanmak, metninizi tarayıcı pencerenizle tamamen ölçeklendirmenize olanak tanır. Bu, satır uzunluğunun sabit kalmasını istiyorsanız yararlı olabilir.

Tarayıcı görünüm penceremin/penceremin boyutunu ayarladığımda bu başlık metnine ne olduğuna bakın. Başlığın metin boyutu 15vw'dir (bu, tarayıcı görünümünün %15'idir).

Bunu bir adım daha ileri götürmek istiyorsanız, başlık metniyle otomatik olarak ölçeklenecek başlık için özel bir em dolgusu ayarlayabilirsiniz. Bu, yalnızca başlık etiketine em dolgusunu uygularsanız işe yarar, bu nedenle gelişmiş sekmesi altındaki özel CSS başlık kutusuna eklemeniz gerekir.

Başlığın üstündeki ve altındaki dolgunun başlıkla nasıl ölçeklendiğine dikkat edin.

Özel Kullanım Durumları

Tam Yükseklikte Başlıklar Oluşturmak için vh'yi Kullanma

Fullwidth Header Module, başlığınızın düzenini tam ekran olarak değiştirme seçeneğine sahiptir. Bu, ekran boyutu ne olursa olsun sayfa yüklendiğinde başlığınızın tüm ekranı kaplamasını sağlar.

Aynı etkiyi divi oluşturucuyu kullanarak herhangi bir bölümle gerçekleştirebilirsiniz. Tek yapmanız gereken, Gelişmiş Bölüm Ayarları sekmesine gitmek ve Ana Öğe giriş kutusuna aşağıdaki özel CSS'yi girmek:

height: 100vh;

Henüz tahmin etmediyseniz, bu, bölümünüzün tarayıcı görünüm alanının tüm yüksekliğini kapsamasını sağlar.

Büyük Ölçeklenebilir Düğmeler Oluşturmak için vw ve em kullanma

Henüz bilmiyorsanız, Divi'nin düğmeleri için varsayılan dolgu aşağıdaki gibidir:

0,3em Üst, 1em Sağ, 0,3em Alt, 1em Sol

Ancak, düğme modülünün dolgusunu şöyle bir şeye ayarlayarak bunu değiştirebilirsiniz:

0,5em Üst, 2,5em Sağ, 0,5em Alt, 2,5em Sol

Özel dolgunuz, düğme yazı tipinizin boyutuna göre ölçeklenir.

Ardından yazı tipi boyutunuzu 4vw değerine değiştirebilirsiniz.

Bu, büyük monitörlerde gerçekten büyük bir düğme gösterecek ve tarayıcı pencerenizi ayarlarken güzel bir şekilde ölçeklenecektir. Telefonlarda düğmenin çok küçük ölçeklenmesini önlemek için akıllı telefonlar için düğmenize bir piksel değeri ayarlayabilirsiniz.

Diğer Faydalı Kaynaklar

• CSS Uzunluk Birimleri
• CSS Uzunlukları
• vw Kullanan Özel CTA Bölümleri
• Daha İyi Mobil Tasarım
• vh ve vw birimleri ile Duyarlı ve Akışkan Tipografi

Hadi gözden geçirelim. Yapalım mı?

Genişlik – Özel genişlikler için yüzdeleri kullanın. Ayrıca, Divi oluşturucuda pikseller kabul edilebilir çünkü bu bir maksimum genişlik değeridir ve mobil cihazlarda yanıt vermeyi sürdürecektir.

Marj – Divi, temalar ızgaranızdaki sütunlar arasına marj eklemek için zaten yüzdeleri kullandığından, belirli bir nedeniniz olmadıkça yüzdeleri kullanmaya devam etmek mantıklı olacaktır. Ne yaptığınızı anladığınız sürece kenar boşlukları için vw ve vh kullanabilirsiniz.

Dolgu – Dolgu için iyi çalışan birçok seçeneğiniz var. Genel olarak, tutarlılık için satırları ve bölümleri doldurmak için yüzdeleri kullanırdım. Ancak yazı tipi boyutlarına göre ölçeklendirmek için modül dolgusu için em kullanırdım. Pikseller dolgu için her zaman iyidir, ancak bence özel bir tasarım nedeniniz olmadıkça kaçınılmalıdır.

Yazı Tipi Boyutu – Özel yazı tipi boyutu için pikselleri kullanın. Yazı tipi boyutunun ana yazı tipi boyutuna göre olmasını istiyorsanız, üst öğeyi değiştirerek tüm yazı tipi boyutlarını değiştirmeyi kolaylaştırırsanız, Em de kabul edilebilir. Yazı tipi boyutu için vw kullanmak, başlıklar veya tarayıcı görünüm alanıyla ölçeklenecek metne ihtiyaç duyan tasarımlar için güzel bir seçenektir.

Harf Aralığı – Daha sonra yazı tipi boyutunu değiştirirken ölçeklendirmek için harf aralığı için em kullanın.

Satır Yüksekliği – Yazı tipi boyutuna göre ayarlanması için satır yüksekliği için em kullanın.

Kenarlıklar – Kenarlıklar için pikselleri kullanarak yanlış gidemezsiniz, ancak diğer seçenekleri göz ardı etmeyin. em kullanmak, kenarlığınızı yerel yazı tipi boyutuna ayarlar (düğmeler için kullanışlıdır). Ve vw'yi sınırlar için kullanmak ilginç bir düşünce.

Son düşünceler

Neyse ki Divi oluşturucu, CSS uzunluk birimlerinde uzman olmak zorunda kalmadan güzel, duyarlı web siteleri oluşturmanıza olanak tanıyan bir dizi yerleşik özelliğe sahiptir. Ancak, sayfanızda özelleştirmeler yapmaya karar verdiğinizde hangi uzunluk birimlerini kullanacağınızı anlamanız faydalı olacaktır. Sitenizin tüm ekran boyutlarında harika görünmesi mutlak bir zorunluluktur ve doğru uzunluk değerlerini kullanmak işinizi daha da kolaylaştıracaktır.

Umarım bu rehber yardımcı olmuştur. Ve her zaman olduğu gibi, yorumlarda sizden haber almak için sabırsızlanıyorum.

Şerefe!