CSS birimlerini anlama (ve bunların nasıl kullanılacağını)

Muhtemelen daha önce web kodunda çeşitli CSS birimleri görmüşsünüzdür, ancak nasıl çalıştıklarını anlamak bunları daha kasıtlı olarak kullanmanızı sağlar. Bu yazıda, CSS birimlerinin gerçekte ne olduğunu, düzenlerinizi nasıl etkilediğini ve bunları Divi 5'in içinde kullanmanın daha duyarlı bir şekilde tasarlamanıza nasıl yardımcı olduğunu öğreneceksiniz.

Divi 5, CSS birimleri için yerel destek getiriyor. Yeni Gelişmiş Birimler özelliği sayesinde %, EM, REM, VW ve daha fazlasını özel kod olmadan kullanabilirsiniz.

CSS birimleri nelerdir?

CSS birimleri tarayıcıya bir şeyin ne kadar büyük veya küçük olması gerektiğini söyler. İster bir başlığın boyutunu, bir bölümün genişliğini veya öğeler arasındaki boşluğu ayarlayın, bu alanı tanımlamak için birimler kullanıyorsunuz. Onlar olmadan, tarayıcının değerlerinizle ne yapacağınız hakkında hiçbir fikri yoktur.

Örneğin, genişlik yazma: 100 tarayıcıya hiçbir şey ifade etmez. Ancak 100px veya%100 gibi bir birim ekleyin ve şimdi tam olarak ne istediğinizi biliyor.

Bu örneği her biri farklı bir CSS değeri kullanarak dört kutu ile alın:

• Birincisi genişliği kullanır: 100. Teknik olarak geçersiz, ancak birçok tarayıcı bunu%100 olarak getirecektir.
• İkinci (100px) sabit bir genişlik kullanır.
• Üçüncü ve dördüncü (% 100 ve% 60) ana kabına göre ölçeklenir.

Genişliğe sahip ilk kutunun neden teknik olarak geçersiz olmasına rağmen hala tam genişlikte göründüğünü merak edebilirsiniz.

Genişlik: Bir birim olmadığı için tarayıcı tarafından 100 göz ardı edilir. Ancak bu durumda, kutu CSS kabul edildiği için değil, Div gibi blok seviyesi elemanların doğal olarak ebeveynlerinin tam genişliğini varsayılan olarak kapsadığı için kapsayıcıya kadar uzanır. Geçersiz CSS'nin%100 olarak yorumlanmasının bir sonucu değil, varsayılan davranışın tesadüfü.

Popüler CSS birimleri

PX ve % genellikle görünse de, diğerleri, ne zaman kullanacağınızı bildiğinizde diğerleri de yararlıdır:

Bu birimleri web tasarımında her yerde, yazı tipi boyutları ayarlamaktan, bölüm genişliklerini tanımlamak, dolgu ve kenar boşluklarını ayarlamak ve esnek ızgara düzenleri oluşturmaktan göreceksiniz. Düzeninizin nasıl göründüğü ve davrandığı konusunda en önemli belirleyici faktörlerden biridir. Ve hangi birimlerin etkili tasarımda daha önemli olduğunu kullandığınız yerde, kısa süre içinde buna ulaşacağız.

Ancak ilk olarak, tüm CSS birimlerinin iki ana türe düştüğünü bilmek yararlıdır: mutlak ve göreceli.

Mutlak ve göreceli birimler

Düzeninizin farklı ekran boyutlarında iyi çalışmasını istiyorsanız farkı anlamak çok önemlidir.

Mutlak birimler

Mutlak birimlerin sabit değerleri vardır. Bu, 100 piksel olarak bir şey ayarladığınızda, kullanıcının bir telefonda, tablette veya büyük bir masaüstü monitöründe olsun, her zaman 100 piksel genişliğinde olacağı anlamına gelir. Bu birimler ekran boyutuna veya çevredeki düzene yanıt vermez, bu da tam kontrolüne ihtiyacınız olduğunda onları harika yapar.

Genellikle sınırlar, simge boyutları veya sabit kutu gölgeleri için kullanılırlar, genellikle hassasiyet esneklikten daha fazla önemlidir.

Ancak aynı hassasiyet sorunlara neden olabilir. Büyük bir ekranda mükemmel görünen bir tasarım taşabilir, garip bir şekilde küçülebilir veya tamamen daha küçük cihazlarda kırılabilir. Mutlak birimler adapte olmadığından, dikkatli kullanılmadıkça düzeninizi sert hissettirebilirler.

Göreceli birimler

Adından da anlaşılacağı gibi, bunlar çevrelerine göre ayarlanır. Belirli bir boyuta kilitli kalmak yerine, bağlama bağlı olarak ölçeklenirler (üst öğe, görünüm pporu vb.). Bu onları duyarlı tasarım için çok daha esnek hale getirir.

Bazı birimler, üst öğenin boyutuna, diğerleri sayfanın kök yazı tipi boyutuna yanıt verir ve hatta bazıları tarayıcı penceresinin kendisine tepki verir. İşte birkaç önemli olan:

• % ana konteyner ile ölçeklenir.
• EM, üst öğenin yazı tipi boyutuna göre ayarlanır.
• REM, sayfanın kök yazı tipi boyutunu takip eder.
• VW ve VH, tarayıcı görünüm sporunun genişliğine ve yüksekliğine yanıt verir.

Farklı ortamlara uyum sağladıkları için, bu birimler herhangi bir ekranda doğal hisseden düzenler oluşturmanıza yardımcı olur. İçeriğinizi okunabilir ve tasarımınızı cihazlar arasında dengeleyen alanla genişler veya büzülürler.

Bu esnekliğin neden önemli olduğunu görmek için hızlı bir örneğe bakalım. Bir resim bölümü oluşturduğunuzu ve genişliğini 1200 piksel olarak ayarladığınızı varsayalım.

Bu büyük bir monitörde mükemmel görünebilir, ancak 768 piksel ekran genişliğine sahip bir tablette görüntü taşabilir ve garip görünebilir. Şimdi kullanmayı deneyin:

width: 100%;

Bu, tarayıcıya görüntünün kabının genişliğini doldurmasını söyler. Ekran geniş veya dar olsun, görüntü otomatik olarak ayarlanır.

Göreceli bir birim kullanmanın asıl yararı yanıt verebilir. Sadece bir beden atamakla kalmıyor, aynı zamanda tarayıcıya düzeninizin farklı senaryolarda nasıl davranması gerektiğine dair net talimatlar veriyorsunuz. Ve doğru yaptığınızda, içeriğiniz her ekrana uyur.

Mantıklı oldukları göreli birimleri kullanarak, katı düzenlerden kaçınır, kesme noktaları ihtiyacını azaltır ve tasarımınızın yönetilmesini kolaylaştırırsınız. Ve Divi ile, farklı CSS birimlerini kullanmak için tek bir kod satırı yazmanız gerekmez. Oluşturucuda istediğiniz üniteyi seçin ve düzeninizin gerçek zamanlı olarak yanıt verdiğini görün.

Hangi CSS ünitesini ne zaman kullanmalı?

Artık mutlak ve göreceli birimler arasındaki farkı anladığınıza göre, bir sonraki adım her birini ne zaman kullanacağını bilmek.

Kural olarak, düzeninizin farklı ekran boyutlarına uyum sağlaması gerektiğinde göreli birimlerle gidin. Bunlar bölüm genişlikleri, tipografi, öğeler arasındaki boşluk veya tam sayfa düzenler için mükemmeldir. Otomatik olarak ölçeklendikleri için, her cihaz için ayrı stiller oluşturmadan tutarlılığı korumanıza yardımcı olurlar.

Öte yandan, ekran boyutuna bakılmaksızın aynı kalmasını istediğinizde mutlak birimler yararlıdır. Sınırları, simgeleri, sabit boşluğu veya küçük görsel ayrıntıları düşünün.

İşte seçimlerinizi yönlendirecek birkaç örnek:

• Simge boyutları gibi tam denetime ihtiyacınız olduğunda PX kullanın. Uyum olmadığından, düzen genişlikleri veya metin için bundan kaçının.
• Konteynerleriyle birlikte elementlerin ölçeklenmesini istediğinizde % kullanın.
• Ana öğenin yazı tipi boyutuyla ölçeklenmesini istediğiniz zaman EM'yi kullanın.
• Sitenizde tutarlı boyutlandırma istiyorsanız REM'i (genellikle kök EM olarak adlandırılır) kullanın. Kök yazı tipi boyutuna dayandığı için, aralık ve tipografiyi öngörülebilir tutar.
• Tam ekran bölümleri, kahraman alanları veya doğrudan ViewPort'a yanıt veren aralıklar için VW ve VH'yi kullanın (cihaz ekranınızın tüm görünümü).

Daha gelişmiş kontrol için birimleri CSS işlevlerini kullanarak birleştirebilirsiniz. Calc (), minimum tabanla duyarlı aralık için 1REM + 5VW gibi değerleri karıştırırken kullanışlıdır. Clamp (), sınırlar arasında büyüyen veya küçülen sıvı değerlerini ayarlamak için idealdir, bu da onu medya sorgularına daha temiz bir alternatif haline getirir.

Sonunda, doğru birimi seçmek, her bir öğenin farklı senaryolarda nasıl davranması gerektiğini düşünmeyi ve bunu en iyi başaran birimi seçmeyi içerir.

Divi'nin gelişmiş birimleri, kodlamadan duyarlı bir şekilde inşa etmek için

CSS birimlerinin size nasıl düzen davranışları üzerinde kontrol verdiğini gördük. Divi 5 bu kontrolü alır ve gelişmiş birimlerle kullanmayı zahmetsiz hale getirir.

YouTube kanalımıza abone olun

Doğrudan inşaatçıya inşa edilmiş %, EM, REM, VW ve VH için yerel destekle, bir kod paneli açmaya gerek kalmadan modüllere, bölümlere, aralıklara ve tipografiye gerçek CSS değerleri uygulayabilirsiniz. Herhangi bir sayısal alanda, Gelişmiş Ünite açılır menüsünden tercih ettiğiniz birimi seçin, değeri ayarlayın ve değişiklikleri canlı olarak görün.

Ve burada bitmiyor. Divi ayrıca görsel oluşturucuda Calc () ve Clamp () gibi gelişmiş CSS işlevlerini kullanmanızı sağlar. Bu, aynı seviyede hassas geliştiricilerin elle yazılmış CSS'den aldığı, ancak görsel olarak akışkan değerleri ve ince ayar düzenleri oluşturabileceğiniz anlamına gelir.

Farklı ekran boyutlarında akıcı bir şekilde ölçeklenen bir yazı tipi boyutuna mı ihtiyacınız var? Kelepçe () kullanın. Sabit ve esnek değerlerin bir karışımı ile aralığı dengelemek ister misiniz? Calc () deneyin. Divi her şeyi anında ve görünür bir şekilde ele alıyor.

Artık tasarım ve kod arasında tahmin etmiyorsunuz veya geçiş yapmıyorsunuz. Divi, öğelerinizin cihazlarda nasıl ölçeklendiğini ve davrandığı konusunda tam kontrol ile duyarlı mantığı doğru bir şekilde elde etmek için görsel güç ve anında geri bildirim verir.

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

CSS birimleri Divi'nin gelişmiş iş akışlarıyla mükemmel bir şekilde senkronize

Divi'nin bireysel CSS birimlerini kullanmayı nasıl yapımcının içinde nasıl kolaylaştırdığını gördünüz. Ancak gerçek güç, bu birimlerin tüm sitenizde birlikte çalıştığını gösterir. İşte tasarım değişkenleri, seçenek grup ön ayarları ve calc () ve clamp () gibi gelişmiş CSS işlevleri gerçekten parlıyor.

Divi sadece CSS birimlerini alanlara girmenize izin vermez. Kod yazmadan bunları tüm tasarım sisteminize entegre etmenize yardımcı olur. Her şey tutarlı, ölçeklenebilir ve bakımı daha kolay kalır.

Divi'nin esnek, mantık güdümlü bir iş akışının bir parçası olarak CSS birimlerini kullanmanıza nasıl yardımcı olduğunu görelim:

1. Tasarım değişkenleriyle düzen mantığı oluşturun

Herhangi bir projede zaman kazanmanın en kolay yollarından biri, düzen mantığınızı önceden planlamaktır. Aynı boşluk veya yazı tipi boyutunu birden fazla yerde ayarlamak yerine, bu değerleri bir kez tanımlarsınız ve Divi'nin tasarım değişkenleriyle tüm tasarımınızda yeniden kullanırsınız.

2REM, 5VW gibi gerçek CSS birimlerini veya hatta Calc (2REM + 1VW) gibi formüller kullanarak –Card-padding veya-bölüm-boşluk gibi yeniden kullanılabilir değerler oluşturabilirsiniz. Ayarlandıktan sonra, bu değerler her şeyi tutarlı tutmak için modüller, satırlar ve bölümler arasında uygulanabilir.

Değişkeni yalnızca daha sonra değiştirmek istiyorsanız güncellemeniz gerekir. Değişiklik, kullanıldığı her yere yansıtır ve size bireysel ortamları avlamanın ileri geri kalmasını sağlar. Ve CSS birimleri Divi'nin sistemine yerleştirildiğinden, tahminlere değil, gerçek CSS mantığını görsel olarak uyguluyorsunuz. Bu, projeniz büyüdükçe düzeninizi daha yönetilebilir, ölçeklenebilir ve ayarlamayı kolaylaştırır.

2. CLAMP () ve Calc () 'yi görsel olarak kullanın

CLAMP () ve Calc () gibi CSS işlevleri, duyarlı düzenler oluşturmanıza yardımcı olur. Medya sorguları yazmadan ekran boyutlarında ayarlanan esnek değerleri tanımlamanıza izin verirler. Bu nedenle, her cihaz için sabit boyutlar ayarlamak yerine, tarayıcının belirlenen sınırlar arasında sorunsuz bir şekilde ölçeklendirilmesine izin vermek için CLAMP (1REM, 2VW, 2.5REM) gibi mantık yazabilirsiniz. Veya bir kahraman bölümünü görüntüleme yüksekliğinize göre ayarlamak için Calc'ı (100VH - 80PX) kullanın.

Normalde, CSS'nin manuel olarak yazılmasını gerektirirler. Divi'de bunları doğrudan herhangi bir sayı alanına girebilirsiniz.

CSS birimleri her iki işlevin de içinde desteklendiğinden, istediğiniz davranışı tam olarak almak için REM, VW ve PX gibi değerleri karıştırabilirsiniz. Sonuçları yazarken canlı görürsünüz, bu da inşaatçıdan ayrılmadan denemeyi ve yanıt vermeyi kolaylaştırır.

3. Opsiyon Grup Ön ayarlarıyla birim mantığını kaydedin

Gelişmiş birimler veya formüller kullanarak düzenler ayarladıktan sonra, bunları tekrar yeniden inşa etmeniz gerekmez. Divi, bir seçenek grubu ön ayarları olarak Palding: Clamm (1REM, 3VW, 2REM) gibi şeyler de dahil olmak üzere stil mantığınızı kaydetmenizi sağlar.

Bu, aynı aralık veya düzen desenine bir daha ihtiyacınız olduğunda, aynı ayarları uygulamadığınız, ancak kaydedilmiş önceden ayarlanmış olduğunuz anlamına gelir.

Ve ön ayarların içinde tasarım değişkenleri kullanıyorsanız, daha da iyidir. Tüm web sitenizin stillerini değiştirmenin tek bir şeye bağlı olduğu birbirine bağlı bir sistem oluşturabilirsiniz: değişkeni değiştirme.

Divi'de, bir CSS ünitesini kullanmak sadece boyut değildir; Davranışla ilgili. Belirlediğiniz her değer, düzeninizde uyum sağlayan, ölçeklendiren ve tutarlı kalan görsel bir sistemin parçası haline gelir. Ve hepsi inşaatçıya yerleştirildiği için, kodlamaya daha az ve daha çok mantıkla tasarım gibi hissediyor.

Divi, CSS birimlerini görsel bir süper güç haline getiriyor

CSS birimlerini kullanmak için CSS yazmanız gerekmez. Divi 5 hepsini gerçek zamanlı olarak keşfedebileceğiniz, uygulayabileceğiniz ve önizleyebileceğiniz görsel bir arayüze getiriyor. İster boşluğu ayarlayın, ister sıvı tipografisi oluşturun, ister değişkenler ve ön ayarlarla düzen mantığı oluşturun, Divi hepsini görsel olarak yapmanızı sağlar.

Denemeye hazır mısınız? Divi 5'i indirin ve tasarımlarınızda gerçek CSS birimlerini kullanmaya başlayın.