Divi’de CSS uzunluk birimlerini anlamak ve uygulamak için yönergeler
Divi ile web siteleri tasarlarken, boyutla ilgili birçok karar vermelisiniz. Bu bir satır genişliği, yazı tipi boyutu veya modüle ne kadar dolgu eklenmesi olabilir. Ve her şeyi daha zor hale getirmek için, tüm cihazlar için doğru boyuta karar vermeliyiz. CSS dünyasında, bir elemanın boyutu (veya uzunluğu) uzunluk bir birim olarak ifade edilir. Birim uzunluğu, öğenin uzunluğunu belirlemek için sayı değerini (10px, 2em,%100, vb.) Takip eden küçük bir harf/semboldür. Her zaman uzun bir birim kullanıyoruz. Ve Divi süreci çok daha kolay hale getirmiş olsa da, uzun birim hala web siteleri tasarlamada günlük işin bir parçası. Bu yüzden bugün size Divi ile doğru uzun birimleri anlamanıza ve uygulamanıza yardımcı olacak bir rehber vermeye çalışacağım.
Bu yazıda, uzunluğun birim değerini kullanan aşağıdaki öğeleri tartışacağım:
Geniş
Sınırlamak
Katman
Sınır
Metin (yazı tipi boyutu, harf alanı, satır yüksekliği)
Birim uzun birim uzunluğunun kısa bir özeti genellikle iki ana kategoriye ayrılır: mutlak ve göreceli. Mutlak Uzunluk Birim Birimleri Ünite kesinlikle mutlak olarak kabul edilir, çünkü diğer unsurlara göre değildir. Bu ünite tarayıcı boyutuna taburcu edilmeyecek ve her zaman aynı boyutta olacaktır. Bu, aşağıdakileri içerir: inç cm-cm-sentimetre mm-milimetre PC-picas piksel içinde pt-poine px-piksel, web’de kullanılmak üzere dikkate almamız gereken mutlak CSS uzunluğunun tek birimidir. Diğerleri çoğunlukla fiziksel ölçüm için kullanılır (dijital değil) (baskı gibi). Piksel birimi, cihazınızın ekranının bir “noktası” boyutunu ifade eder (her cihaz için biraz farklı olacaktır). Bu nedenle, pikseller genellikle tarayıcının boyutuna ayarlanması gerekmeyen şeyler için kullanılır. Nispi uzunluk birimi nispeten göreceli olarak kabul edilir, çünkü değişir/ölçek diğer elemanların uzunluğuna bağlıdır. Yaygın bir örnek, ana öğenin uzunluğuna bağlı olan yüzdedır. EM – fren öğesinin boyutuna göre – kök VW yazı tipi öğesinin boyutuna göre – Vhiver tarayıcısı VH VH’nizin% 1’ine göre – Viework Tarayıcı VMIN VMIN’inizin% 1’ine göre -% 1’ine göre% 1’e göre Tarayıcı görünüm alanının iki boyutu daha küçük (uzun veya geniş). Vmax – ViewPort tarayıcısının (yükseklik veya genişlik) iki boyutunun% 1’ine göre. % – Ana öğenin 1/100 genişliğine göre.
Tüm bu birimler Web için kullanılır. Bu yazı için frenlere, VMIN veya Vmax’a konsantre olmayacağım çünkü daha az yaygındırlar ve Divi ile iyi çalışmazlar. Her ne kadar önerilen kullanım durumunu duymaktan mutluluk duyacağım. Divididivi’nin kutu boyutu, CSS özelliği sınır kutusu ile kutunun boyutunu belirler. Bu temel olarak parçanın, satırın veya modülün genişliği ve yüksekliği, içerik, dolgu ve sınırların miktarına göre belirlenir. Divi ile bir web sitesi oluşturduysanız, nasıl çalıştığını zaten biliyorsunuz. Çizgiyi bir kutu olarak düşünün. Diyelim ki 1000 piksel genişliğe sahip bir çizgi yaptığınızı. Satırlara içerik ekleyin (diğer kutular/modüller gibi) satırın genişliğini değiştirmez. Sıraya dolgu eklemek de satırın genişliğini değiştirmez, ancak kutuya uygulanır. Sırayı satıra eklerseniz, sınır da kutuya uygulanır ve belirtilen genişliği etkilemez. Başka bir deyişle, 50 piksel sağ ve sol dolgu eklemek 1100 piksel satır üretmeyecek ve satırınızın etrafına 10 piksel bir limit eklemek, satır genişliğinizi 1020px yapmaz. Değişecek tek şey, daha fazla dolgu veya içerik limiti eklediğinizde yüksekliktir. Marj, kutunun dışında alan ekleyen ve sayfadaki kutuyu (bölüm, satır ve modül) ayırmak için kullanılır.
Bundan bahsediyorum çünkü Divi’nin nasıl çalıştığı hakkında kurucu bloğu (veya kutuyu) anlamak çok yararlıdır, böylece birim değeri (30px, 5em,%50, vb.) Ekleyerek gerçekte ne yapıldığını öğrenebilirsiniz. Senin sayfan. Birim uzunluğunun önerilen uzunluğu: %, VW ve PX (maksimum genişlik olarak)
Bildiğiniz gibi duyarlı tasarım için maksimum genişliği ayarlamak için % ve PX kullanan Divi, herhangi bir modülün, satırın veya herhangi bir parçanın genişliğini ayarlamanızı sağlar. Bu genişlik varsayılan yüzde birimine ayarlanacaktır, ancak Pixel birim değerini de girebilirsiniz. Ancak teknik olarak belirlenen genişlik değeri maksimum genişliktir. CSS genişliği aslında%100’dür. Tüm parçalar, satırlar, sütunlar ve doğal modüller% 100 genişliğe sahiptir, çünkü her şey div blok öğesi kullanılarak yapılır. Ve blok elemanı her zaman kabın tam genişliğine (%100 genişliğinde) ulaşır. Ne biliyorsun … Divi Divs ile inşa edildi. İşte birkaç test. Sol sütundaki bu metin modülü için modülün genişliğini 1000 piksel olarak güncelleyelim. Kolayca tanınması için gri bir arka plan modülü verdim. Teknik olarak maksimum genişlik olduğu için gerçekten 1000 piksel tam olarak ulaşmadığını unutmayın. Ancak, varsayılan% 100 genişliği değiştirmek ve gerçek genişliğin 1000 piksel olduğunu belirtmek istersem, bir takip sekmesi açabilir ve ana öğeyi 1000 piksel genişliğe sahip olarak ayarlayabilirim. Şimdi modüle bakın.
Sorun, göreceli değerlere sahip öğelerle çevrili mutlak değerler kullanmanızdır. Bu nedenle, tarayıcınızı küçültseniz bile, modül 1000 piksel kalacaktır. Bu nedenle Divi, gerçek genişliği değil, elemenizin maksimum genişliğini ayarlar. Duyarlı siteler oluşturmak için pikselleri göreceli uzun birimlerle (yüzde gibi) kombinasyon halinde kullanmak yaygındır. Divi, tüm sayfalarınız için içeriğin genişliğini ayarlamak için bu yöntemi kullanır. Özelleştirici Teması> Genel Ayarlar> Düzen Ayarları’na giderseniz, ana içeriğin genişliğini 1080 piksel olarak göreceksiniz.
1080px aslında içeriğiniz için maksimum genişliktir. CSS genişliği aslında%80’dir. Bu nedenle tarayıcı genişliğinizi artırdığınızda, içeriğin genişliği 1080px’de gelişmeyi durduracaktır. Ve tarayıcının genişliğini 1080px’in altına düşürürseniz, içerik ana öğenin% 80’ine göre deşarj olmaya devam edecektir. Divi Builder’a özel bir genişlik değeri ekleyerek bir divi üreticisi kullanırken, hattınız bir web sitesi içeriği olarak kabul edilir ve% 80 genişlik ve maksimum 1080px genişliğinde varsayılan ayarları devralacaktır. Özel bir genişliği ayarlayarak Divi Builder kullanarak satırın genişliğini değiştirirseniz, yeni genişlik değeri, yüzde veya piksel değeri olarak ayarlanmasına bakılmaksızın maksimum genişlik olacaktır. Sırayı tam genişliğe, genişliğe ve genişliğe%89 olarak değiştirirseniz. Bu, hattın her zaman tarayıcı penceresinin% 100’ü olan ana öğenin (parça)% 89’una sahip olacağı anlamına gelir.
Kısacası, divi üreticisi, parçanızın, satırınızın veya modülünüzün genişliğini ayarlarken maksimum genişliği otomatik olarak kullanacak kadar akıllıdır. Viewport genişliğinin (VW) genişliğini ayarlamak için VW kullanılması yüzde değerine çok benzer. Fark, VW değerinin her zaman tarayıcı penceresinin görünüm portu genişliğine göre olmasıdır. Yüzde değeri her zaman ana öğeye göredir. Dikkatli olun 100VW’ye (özel bir CSS’de) koyun, çünkü bu, sayfayı aşağı kaydırırken görünen kaydırmalar boyunca uzanarak bazı sorunlara neden olabilir. Divi geniş bir yüzde üzerine inşa edildiğinden, VW gerektiren özel bir tasarım yapmadığınız sürece, yüzde değerini kullanmaya devam edeceğim. Önerilen birim sınırları: PX, %ve VW Marj özelliği, elemanların dışına boşluk eklemek için uzun bir birim kullanır. Bu, pozitif ve negatif değerler kullanarak elemanları konumlandırmak için de kullanışlıdır. Divi, kenar boşluğunun, satırın veya modülün herhangi bir bölümünü ayarlamanıza izin verir.
Kenar boşlukları ve/veya dolgu için piksel kullanarak marjlar için PX kullanmak, farklı ekran boyutları için belirli bir uzunluk ayarladığınız sürece uzunluk değerinin farklı ekran boyutunuza ayarlanmayacağını anladığınız sürece olabilir. Sol veya sağ kenar boşlukları için piksel kullanmaktan kaçının, özellikle sol ve sağ kenar boşlukları için marjı ayarlamak için piksel kullanmaktan kaçınmak istersiniz. Kenar boşlukları için mutlak bir uzunluğa sahip olmak, içeriğinizle doğru bir şekilde boşaltılmayacak ve sonunda sizi tarayıcının belirli bir genişliğinde istediğinizden daha fazla ya da daha az marjla bırakacaktır. Tasarım amacıyla mutlak marjlara sahip olmak istediğiniz bunun için istisnalar vardır. Gerekirse mobil cihazlar için kenar boşluğunun uzunluğunu ayarladığınızdan emin olun. Üst ve alt kenar boşlukları için piksel kullanılarak, kenar boşlukları için piksel kullanma oldukça yararlıdır. Örneğin, elemanları sayfada yukarı veya aşağı taşımak istiyorsanız, pozitif veya negatif piksel değerleri öğeleri vermek, öğeyi doğru konumda dikey olarak taşımanıza izin verir. Bunun için bir yüzde kullanırsanız, tarayıcının genişliğini değiştirdiğinizde öğe yukarı veya aşağı hareket eder. Marjlar için bir yüzde kullanmak Kenar boşlukları için bir yüzde kullanmak, duyarlı siteler oluşturmanın iyi bir yoludur. Daha önce de belirtildiği gibi, yüzde değeri ana öğenin uzunluğuna göredir. Divi, sütunlar arasında boşluk yapmak için doğru marj için bir yüzde kullanır. Marj yüzdesi, satır ayarlarındaki oluk genişliğini değiştirilerek kolayca ayarlanabilir. Olukların genişliği temel olarak sütunlarınız arasında istediğiniz marj yüzdesidir. Olukun genişliği 3’e ayarlanırken, sütunlar arasındaki kenar%5.5’tir. Tarayıcının genişliğini nasıl ayarlarken boşluk ölçeğine dikkat edin. Bu nedenle, modülün sağ veya sol kenar boşluğunu ayarlamanız gerekiyorsa, doğru ölçeği korumak için yüzdeyi kullanmanın en iyisi olduğunu unutmayın. Nesneyi yatay olarak konumlandırmak için bir yüzde marjı kullanın Bazen bazı yaratıcı tasarımlar nesneden örtüşen nesneler için soldan sağa hareket etmesini veya asimetrik tasarım oluşturmak isteyin. Bu durumda sağ veya sol kenar boşluğu için negatif bir yüzde değeri kullanabilirsiniz. Bu nesneyi hareket ettirir, ancak yine de tarayıcının genişliğine ayarlanır. Aşağıda, görüntüyü başka bir görüntü ile kaplamak için yüzde değerini kullanma örneğidir. Yatay konumlandırma için yüzde değerlerinin 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. Dolayısıyla, marjı%30’un üzerine yerleştirirseniz, sütun genişliği değiştiğinde görüntü yukarı ve aşağı hareket eder. Bu nedenle birçok durumda dikey elemanları piksel gibi mutlak uzunlukta konumlandırmak istersiniz. Yüzde, VW ve VH uzunluk birimleri gibi özel marjlar için VW ve VH’yi kullanmak, parçalar, satırlar veya modüller arasında ViewPort tarayıcınıza göre ayarlanmış bir şekilde kenar boşlukları eklemek için yararlı olabilir. Fark, VW ve VH’nin her zaman ana öğenin (yüzde gibi) değil, görünümün büyüklüğüne göre olmasıdır. Ünitenin önerilen uzunluğu: PX, %, EM, VW ve VHDIVI, parçaları parçalar, satırlar, sütunlar ve modüller için ayarlamanızı sağlar.
Neredeyse her şey için dolgu için piksel kullandığımda dolgu için bir piksel kullanmak var. Ama farkındaydım. Marj gibi, tarayıcının boyutu ne olursa olsun, mutlak bir dolgu uzunluğuna sahip olmak istiyorsanız dolgu için piksel kullanabilirsiniz. Ancak genel olarak, dolgu tarayıcının boyutuna göre ayarlanmalıdır. Bunun yerine, dolgu için bir yüzde kullanmanızı öneririm. Tarayıcının genişliği değişirken, elemanlar arasında tutarlı bir dikey mesafe korumak için üst ve alt dolgu için piksel kullanmak için duyarlı web tasarımında yaygındır. Divi bunu bölüm ve çizgi için yapar. Temanın ayarlanması altında (1-10) bölümün veya satırın yüksekliğine bağlı olarak, parça ve/veya satır daha büyük veya daha düşük bir üst rulman veya daha düşük olacaksınız. Ancak CSS’yi görürseniz, üst ve alt dolgunun belirli bir kesme noktasındaki yüzde değerine ve başkaları için piksel değerine ayarlandığını göreceksiniz. Örneğin, varsayılan yüksekliği daha büyük bir ekran genişliğinde (1350px’den büyük) 4 değerine bırakırsanız, üst ve alt dolgu 54 piksel olacaktır. 980px-1350px arasındaki ekran genişliğinde, üst ve alt dolgu% 4’e (yani parçanın genişliğinin% 4’ü) düzenlenecektir. Ekran boyutlarında 980 pikselden daha az, üst ve alt dolgu 50 piksel olarak ayarlanır. Bu teknik, iki uç arasındaki cihazlar için yüzde değeri olan bir dolgu ölçeğine sahip bir dolgu ölçeğine sahipken, akıllı telefonlar için minimum dolgu değerini ve maksimum dolguları büyük monitörler için ayarlamak için mükemmeldir. Dolma için % % kullanmanın yüzde değerini (piksel değil) kullanmak çok daha kolaydır. Belirli kesme noktalarına ek değerler eklemeye gerek kalmadan işleri iyi ölçeklendirmek için dolgu için. Ve önemli içeriği “en iyi paro’da” depolamak isteyenler için, üst ve alt dolgu için piksel yerine bir yüzde kullanmak bu işlemi basitleştirmeye yardımcı olacaktır. Aşağıda, üst dolgunun 50 piksel olarak ayarlanmış bir kısmı örneğidir. Parçalar arasında çok fazla alan olduğundan, aynı 50px dolgunun masaüstünde olduğu gibi bir akıllı telefonda nasıl iyi görünmediğine dikkat edin. Aşağıda, üst dolgunun%4’e ayarlanmış bir parçası örneğidir. Masaüstünden akıllı telefona kadar ölçeğin ne kadar iyi olduğuna dikkat edin. 1920 piksel genişliğinde tarayıcı penceresinde, üst dolgu 76px’dir (0.04 kez 1920). Ancak tarayıcı penceresini 375px genişliğe en aza indirdiğinizde,% 4 dolgu 15px’e (0.04 kat 375) eşittir. Not: Üst ve düşük yüzde değerlerinin her zaman yüksek değil, elemanın genişliğine göre olacağını hatırlamak önemlidir. Dolgu için dolgu için kullanmak için kullanmak çok yararlı olduğu ortaya çıktı. Masaüstü için 22 piksel içerik metin boyutuna, tabletler için 18px ve akıllı telefonlar için 14px’e sahip bir metin modülünüz olduğunu varsayalım. 1EM masaüstünde 22px, tablette 18px ve bir akıllı telefonda 14px ile aynı olacak. Benimle kal. Metin modülüne metin boyutuna ayarlanacaktır. Masaüstünde, 2EM 2 22 piksel olacağından dolgu 44 piksel olacaktır. Tablette dolgu 36 piksel olacaktır. Ve bir akıllı telefonda dolgu 28 piksel olacak. Bu, duyarlı tasarım için çok iyi çalışan yazı tipi boyutuna göre dolguların dağıtılmasına yardımcı olur. Dolgu için VH ve VW’yi kullanarak, yüzdenizle aynı şekilde dolgu için VH ve VW’yi kullanabilirsiniz. Fark, VH ve VW’nin her zaman görünümün büyüklüğüne göre olmasıdır. Yüzde her zaman ana öğeye göre. Bu örnekte, bölümden ve satırdan tüm dolguları kaldırıyorum ve aşağıdaki her dolgu metin modülünü veriyorum: 2VH üst, 5VW sağ, 2vh Aşağıda, 5VW Sol Not Tarayıcının yüksekliğini nasıl ayarlayacağınızı veya üste ekleyeceğini ve ekleneceğini not edin. Her modül için alt dolgu. Uzun ünite sınırlamaları önerilir: PX, EM ve VW Sınır için bir piksel kullanma oldukça yaygın bir sınır için bir piksel kullanarak ve ana yazı tipi (EM) veya ViewPort tarayıcısının (VH, VW) boyutuna göre ölçek sınırını istemediğiniz sürece önerilir. Limit, ünitenizin % ‘in bir yüzdeyi seçenek olarak içermediği yukarıdaki başlığa dikkat edilmiş olabilir. Bunun nedeni, yüzde değerinin sınır için desteklenen bir birim olmamasıdır. Ancak diğer göreceli uzun birimleri (EM, VH, VW) kullanarak bir sınır ölçeği yapabilirsiniz. Metin modülünün etrafındaki dolgu kullanan fikirlere benzer sınırlar için EM’yi kullanarak sınır için EM’yi kullanma. EM değeri ana yazı tipinin boyutuna göre olacaktır ve yazı tipi boyutu değiştiğinde ayarlanır. Aşağıda, 1EM sınırına sahip bir metin modülü örneğidir. Ayrıca 1EM dolgu modülü verdim. Yazı tipi boyutunu ayarladığınızda ne olacağına dikkat edin. Yazı tipi boyutu arttığında ve azaldığında sınır (ve dolgu) değişir. Bu da düğme sınırı ile çalışır. Aşağıda, sınır genişliği 0.5m olan bir düğmeye örnektir. Düğme metninin boyutu ile ölçeğin nasıl olduğuna dikkat edin. Sınırlar için VW ve VH’yi kullanarak, sınır genişliğinizi ViewPort tarayıcı boyutunuza göre dağıtmak istiyorsanız, VW veya VH uzun birimini kullanabilirsiniz. Çok görmedim, ama düşünmek ilginç. Birim metnin önerilen uzunluğu: PX, EM ve belki VW Divi Builder, metninizi ayarlamak için özel bir uzunluk değeri eklemenizi sağlar. Bu seçenek metin boyutu, harf alanı ve satır yüksekliği içerir. Bu metin seçeneği için CSS uzunluk değerlerinden birini kullanabilirsiniz, ancak bu yazı için en yaygın olanı tartışacağım – PX, EM ve VW.Metin boyutu için PX kullanmak, yazı tipinizin boyutunu Pixel değerine ayarlamak için yaygındır, çünkü bu boyutun tutarlı kalmasını istersiniz.Bir medya sorgusu kullanarak tarayıcının genişliğine göre yazı tipi boyutunu değiştirebilirsiniz.Divi, tüm Divi modüllerine üç farklı cihaz yazı tipi boyutu girmenize izin vererek bunu çok kolaylaştırır. Harfler için PX kullanma alanı genellikle harfler alanı için PX kullanır. Cihazlar arasındaki yazı tipi boyutunu önemli ölçüde değiştirmeyi planlıyorsanız, harf alanını da ayarlamanız gerekebileceğini unutmayın. Mektup boşlukları yapmak için metninizin boyutu ile boşaltılabilir, bunun yerine EM uzunluğu değerini kullanabilirsiniz. PX ünitesinin yüksekliği için PX kullanmak, hattın yüksekliği için en iyi seçim değildir, çünkü yazı tipi boyutunu her değiştirdiğinizde hattın yüksekliğini değiştirmek zahmetli olacaktır. Bu yüzden EM genellikle kullanılır (daha sonra bunun hakkında daha fazla bilgi). EM’yi yazı tipi boyutu için kullanarak EM’yi özel yazı tipi boyutu için kullanabilirsiniz. 1EM değeri, en yakın ana etiketin yazı tipi boyutuyla aynı olacaktır. EM değerini modüldeki metin öğesine eklerken, en yakın ana yazı tipi etiketi boyutu, tema ayarında ayarladığınız her şeydir. Yani, divi’de, vücut yazı tipleriniz 16 piksel, 1em 16px’e eşit, 2EM eşit 32 piksele eşit olarak düzenlenmişse. Bunları hat yüksekliği için kullandığınızda, metin modülünü kullandığınızı ve gövde yazı tipini 18px olarak değiştirdiğinizi söyleyin. EM her zaman en yakın ana etikete göre olduğu için, modül için EM değeri değişir ve şimdi 1EM 18px’e eşittir. Bu, Divi’nin çizginin yüksekliğini neden EM uzunluğuna ayarladığını anlamak için yararlıdır. 1.5EM değerine sahip olacak şekilde metin yazı tipinizi 18px’ten ayarlayın, hattın yüksekliğini 27px (1,7 kez 18px) olarak ayarlayacaktır. Dolayısıyla, yazı tipi boyutunu daha sonra değiştirmeye karar verirseniz, EM hattının yüksekliği ayarlanır. EM’leri harfler için kullanan harf boşlukları için kullanmak boşluk yararlı olabilir ve kesinlikle tavsiye edeceğim.
ET’yi harfler alanı için kullanmanın ana nedeni, metninizin boyutuna bağlı olarak alanın artması ve azalmasıdır. Aşağıdaki resimdeki harf alanını düşünün. Başlık metninin boyutunu değiştirdiğinizde 5 piksel harf mesafesinin nasıl değişmediğini unutmayın. Yazı tipi boyutu 50 piksel ise, 0.1m 5px’e eşit olacaktır. Ancak yazı tipi boyutunu 25px’e düşürürseniz, 0.1m 2,5px’e eşit olacaktır.
Metin elemanları için frenler kullanma frenler kullanılarak genellikle EM kullanmaktan daha fazla tahmin edilir, çünkü her zaman kök yazı tipinin boyutuna göre. HTML etiketinizdeki kök öğeleri. Bu, tüm web sitelerinizi saran bir etikettir. Divi’de, HTML aslında%100 yazı tipi boyutuna sahip olacak. Bu biraz garip görünebilir. Demek istediğim, tam olarak neyin% 100’ü? Aslında, bu oldukça yaygın bir uygulamadır. Bilmeyebilirsiniz, ancak kök/HTML yazı tipinin boyutunu% 100 olarak ayarlamak, tarayıcınızla aynı yazı tipi boyutunu bildirmenin bir yoludur. Çoğu tarayıcı 16px varsayılan yazı tipi boyutuna sahiptir, bu nedenle Divi’de 1REM değeri aslında 16px’dir (veya tarayıcı ayarlarınızda yazı tipi boyutu). Tema ayarında varsayılan içeriğin bir metni olarak belirlediğiniz şey bu değildir. Örneğin, metin modülünün içeriğinin metin boyutuna 1REM eklediğimde ne olacağına dikkat edin. Gerçek metin boyutu 14px’ten (tema ayarında gövde font teması olarak ayarladığım) 16px’e (varsayılan yazı tipi tarayıcı boyutum) yükseliyor. Şimdi tarayıcı yazı tipimin boyutunu daha büyük bir şeye değiştirirsem, metin modülündeki metin de artacaktır. Dolayısıyla, kullanıcının tarayıcı ayarlarına göre ayarlanan metinlere sahip olmak istiyorsanız, fren değeri yardımcı olabilir. Bununla birlikte, çoğu, divi’deki frenleri kullanmak, divi temasının temel çerçevesini değiştirmeye başlamak istemediğiniz sürece sadece değerinden daha zahmetli olacaktır (yani kök yazı tipinin boyutunu başka bir şeye dönüştürmek). Bu metin öğesi için VW kullanmak muhtemelen metin için kullanılacak en ilginç uzunluk değeridir. Buradaki olasılık hakkında ayrıntılı olarak tartışmayacağım, ancak sizi bu fikri tanıtacağım. Yazı tipi boyutu için VW kullanmak, metninizi tarayıcı pencerenizle tamamen çığlık atmanıza olanak tanır. Çizginin uzunluğunun sabit kalmasını istiyorsanız bu yararlı olabilir. ViewPort/Tarayıcı penceremin boyutunu ayarladığımda bu başlık metninde ne olacağını görün. Başlık, 15VW metin boyutuna sahiptir (yani ViewPort tarayıcının% 15’i). Bu adımı daha da ileri çekmek istiyorsanız, başlık metniyle otomatik olarak boşaltılacak başlık için EM dolgusu özelliğini ayarlayabilirsiniz. Bu, yalnızca başlık etiketine EM dolgusu uygularsanız işe yarar, böylece gelişmiş sekmenin altındaki özel CSS başlık kutusuna eklemeniz gerekir. Başlık ile başlık ölçeğinin üstünde ve altına nasıl dolduğunu unutmayın. Tam geniş başlık modülleriyle dolu yüksek bir başlık yapmak için VH’yi kullanarak özel kullanım durumları, 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ı karşılamasını sağlar. Aynı etkiyi bir divi üreticisi kullanarak herhangi bir bölümle elde edebilirsiniz. Tek yapmanız gereken sekme ayarlarına gitmek ve giriş elemanı kutusuna aşağıdaki özel CSS’yi girmektir Ana: Yükseklik: 100VH; eğer tahmin etmediyseniz, bu, parçanızın görünümün tam yüksekliğini içermesini sağlayacaktır. Tarayıcı. Büyük bir düğme oluşturmak için VW ve EM’yi kullanma bilmiyorsanız, divi düğmesi için varsayılan dolgu aşağıdaki gibidir: 0.3em üst, 1em sağ, 0.3em aşağıda, 1em kaldı, ancak bunu ayarlayarak değiştirebilirsiniz. Modül Rulmanları Düğmeye Şöyle Olmak İçin: 0,5 EM Yukarıda, 2.5EM sağ, 0,5EM Aşağıda, 2.5EM Sol özel dolgunuz, yazı tipi düğmenizin boyutu ile deşarj edilecektir. Ardından, yazı tipinizin boyutunu 4VW değerine dönüştürebilirsiniz. Bu, tarayıcı pencerenizi ayarladığınızda büyük bir monitörde çok büyük bir düğme görüntüleyecek ve iyi ölçeklendirecektir. Düğmenin telefonda çok küçük boşaltılmaması için, bir akıllı telefonun düğmesine piksel değerini ayarlayabilirsiniz. Diğer faydalı kaynaklar CSS uzunluk birimi CSS uzunluğu VW kullanarak CTA Özel Bölümü Daha iyi hücresel tasarımVH ve VW birimleri ile duyarlı ve akışkan tipografi Hadi gözden geçirelim. Bilir miyiz? Genişlik – Özel genişlik için bir yüzde kullanın. Buna ek olarak, pikseller divi üreticisinde kabul edilebilir, çünkü bu maksimum genişlik değeridir ve hücresel duyarlılığını koruyacaktır. Marj – Divi, tema ızgaranızdaki sütunlar arasında marj eklemek için bir yüzde kullandığından, bunu yapmamak için özel bir nedeniniz olmadığı sürece bir yüzdeyi kullanmaya devam etmek mantıklıdır. Ne yaptığınızı anladığınız sürece VW ve VH’yi marj için de kullanabilirsiniz. Dolgu – Dolgu için iyi çalışan birçok seçeneğiniz var. Genel olarak, dolgu sıraları ve parçalar için bir yüzde kullanacağım. Ancak EM’yi yazı tipi boyutuna sahip ölçek için dolgu modülleri için kullanacağım. Pikseller her zaman taşıma için iyidir, ancak bunu yapmak için özel bir tasarım nedeni olmadıkça kaçınılmalıdır. Yazı Tipi Boyutu – Özel yazı tipi boyutu için bir piksel kullanın. Yazı tipi boyutunun üst yazı tipinin boyutuna göre olmasını istiyorsanız, EM de kabul edilebilir, bu da ebeveyni değiştirerek tüm yazı tipi boyutlarını değiştirmeyi kolaylaştırır. Yazı tipi boyutu için VW kullanmak, başlıklar veya metnin bir görünüm portu tarayıcısıyla gözden düşmesini gerektiren tasarımlar için iyi bir seçimdir. Letter Penspasian – Daha sonra yazı tipi boyutunu değiştirirken ölçeğin olması için mektup harfini kullanın. Hat yüksekliği – Yazı tipi boyutuna ayarlanacak şekilde hattın yüksekliği için EM’yi kullanın. Sınır – Limit için yanlış piksel kullanamazsınız, ancak diğer seçenekleri görmezden gelmezsiniz. EM’yi kullanmak sınırınızı orijinal yazı tipi boyutuna ayarlar (düğmeler için kullanışlıdır). Ve sınır için VW kullanmak ilginç bir düşünce.
