Daha İyi Mobil Web Sitesi Tasarımı: Fluid Divi Sayfaları Oluşturmak için vw, vh ve rem Nasıl Kullanılır

Web tasarımında duyarlılık artık isteğe bağlı değil. Son on yıldır bir mağarada yaşamadıkları sürece, neredeyse hiç kimse bu önermeyle tartışmazdı. Asıl tartışma, tasarımlarınızı duyarlı hale getirmek için en iyi şekilde nasıl gidileceğidir. Tasarımlarınıza mobil bir bakış açısıyla başlamalı ve normal görünümlere kadar yolunuzu mu kurmalısınız? Bitmiş tasarımlarınızı mobil cihazlara uyarlamaya devam etmeli misiniz? Bu karmaşık bir seçim.

Herkesin iş akışı farklıdır ve muhtemelen duyarlı tasarım için kendi yaklaşımınızı geliştirmişsinizdir. Biz yakın mutlak kesin olarak ifade edebileceğimiz bir şey Henüz CSS içine (örneğin vw, vh ve rem) birimleri görünüm penceresi dahil etmek başlamadılarsa, eksik konum olmasıdır.

Değişken sayfalar oluşturmak için bu birimleri Divi'ye dahil etmeye başlamadan önce, normal ölçüm birimlerini kullanmak yerine onları tam olarak neyin tercih edildiğini gözden geçirelim.

Viewport Birimleri Tam Olarak Nelerdir?

Vw (görünüm alanı genişliği) ve vh (görünüm alanı yüksekliği), ölçümlerinden bağımsız olarak herhangi bir görüntü alanının boyutunun tam olarak % 1'ini temsil eden uzunluk birimleridir. Rem ('root em' kısaltması), özellikle yazı tipi boyutlarıyla ilgilenmesine ve adını kök öğenin yazı tipi boyutunun değerinden almasına rağmen, işlevselliği bakımından da benzerdir – çoğu tarayıcıda varsayılan olarak 16 piksel olması gerekir.

Ayrıca, vmin (minimum görüntü alanı) ve vmax (maksimum görüntü alanı) gibi, görüntü alanının daha küçük boyutunun sırasıyla % 1'ini ifade eden birkaç görüntü alanı birimi daha vardır ( vw ve vh ' den daha az yaygın olarak kullanılsalar da) , ve daha büyük boyutunun %1'i. Ayrıca, vmin ve vmax'tan bile daha az yaygın olan ex (x-yükseklik) ve ch (karakter birimleri) var – çoğunlukla ne kadar delice spesifik olduklarından dolayı. Örneğin, X yüksekliği, kabaca 0,5em'e (yani 8 piksel veya 6 punto yazı tipi) eşit olan temel değerini belirlemek için küçük harf 'x' boyutunu kullanır ve karakter birimleri ' 0' karakteri referans noktası olarak.

Uzun lafın kısası – kendinizi bir başkasının CSS'sini incelerken bulursanız ve bu ilgili birimlerle karşılaşırsanız, onları en yakın akıl sağlığı kurumuna yönlendirmeniz iyi olur.

İlginçtir ki, tarayıcılar aslında genişlik söz konusu olduğunda tüm tarayıcı penceresini hesaplar, yani kaydırma çubuğunu bu boyuta dahil ederler. Bir öğenin genişliğini 100vw değerine ayarlamaya çalışırsanız, görünüm pencerenizi hafifçe germiş olacağınız için yatay bir çubuğun görünmesine neden olur.

Viewport Birimlerini Kullanmanın Avantajı Nedir?

Basitçe söylemek gerekirse, görünüm birimlerini doğru bir şekilde uygulayarak, basit bir uyarlanabilir web sitesinden oldukça farklı, akıcı bir yanıt veren efekt oluşturabilirsiniz. Duyarlı tasarım, görüntü alanınız değiştikçe boyutunu otomatik olarak ayarlarken, uyarlanabilir tasarım, ortam sorgularının kullanımı sayesinde görüntü alanınız belirli bir boyuta ulaştığında kendini düzeltir.

Avantaj, estetik açıdan açıktır – akıcı bir tasarım sadece daha iyi görünür. Ek olarak, sabit birimler üzerinde görünüm pencerelerinin kullanılması, uygulanması ve bakımının daha kolay olması gibi ek bir avantaj sağlar. Uyarlanabilir bir tasarımın uygulanması, çoğu durumda, piksel mükemmel olması gereken belirli değerlerle birden çok ortam sorgusunun eklenmesini gerektirir.

Dahası, görüntüleme alanı birimlerini kullanmak, metninizi her zaman rahat bir satır uzunluğunda kalacak şekilde kolayca tasarlamanıza ve ardından çözünürlüğünüz ayarlandıkça bu deneyimin yukarı veya aşağı doğru ölçeklenmesini sağlar. Metninizin her zaman orantılı kalması için CSS'nizi de değiştirebilirsiniz, örneğin:

h1 {

font-size: 6vw;

}

h2 {

font-size: 3vw;

}

p {

font-size: 2vmin;

}

Bu örnekte, metniniz her zaman birbiriyle ve değiştikçe görüntü alanınızın genişliğiyle orantılı kalacaktır. Hatta bir adım daha ileri gidebilir ve bu birimleri, metniniz için uygun genişlikte daha önce bahsettiğimiz gibi her zaman en uygun satır uzunluğunu sağlayacak kaplar oluşturmak için kullanabilirsiniz.

Başka bir kısa ve tatlı örnekte bir çatlak alalım. Bu sefer, akıcı sayfaların temel bir gösterimi olarak hizmet edecek olan görüntü alanı birimlerini kullanarak birkaç kutu oluşturacağız. HTML ile başlıyoruz:

<h1>Example of Fluid Responsiveness</h1>

<div class=”responsivebox”></div>

<div class=”responsivebox”></div>

<div class=”responsivebox”></div>

<div class=”responsivebox”></div>

Ardından CSS'ye geçiyoruz:

body {

padding: 3vh 3vw;

text-align: center;

}

.responsivebox {

display: inline-block;

width: 16vw;

height: 60vmin;

margin: 2vh 2vw;

background-color: #81d8d0;

}

Koda hızlı bir bakış, tam olarak ne yaptığını anlamak için ihtiyacınız olan her şey olmalıdır. İlk olarak, responsivebox sınıfıyla dört div oluşturduk, sonra onlara bir genişlik, yükseklik ve kenar boşluğu verdik – tümü görünüm alanı birimlerini kullanarak. Eksik olan tek şey, %100 akıcı bir sayfaya sahip olmak için h1'e göreceli bir boyut vermektir (çok basit olsa da), bu yüzden devam edelim ve düzeltelim:

body {

padding: 3vh 3vw;

text-align: center;

}

h1 {

font-size: 6vw;

}

.responsivebox {

display: inline-block;

width: 16vw;

height: 60vmin;

margin: 2vh 2vw;

background-color: #81d8d0;

}

Bunlar, görünüm alanı birimlerini kullanarak neler yapılabileceğinin temelleridir, ancak beklediğiniz gibi, bazı insanlar uygulamalarını daha da ileri götürdüler ve bunları kullanarak gerçekten harika şeyler bir araya getirdiler – örneğin CodePen'deki bu CSS MacBook'a bir göz atın.

CSS'ye bir göz attıysanız, çok havalı bir efekt elde etmek için görüntü alanı birimlerini normal eski piksel değerleriyle nasıl karıştırdığını fark etmiş olabilirsiniz. Bizim amacımız, CSS ile ilgili diğer her şeyde olduğu gibi, onunla yapılabilecekler söz konusu olduğunda sınır gökyüzüdür.

Temel bilgileri geride bıraktıktan sonra, yeni bulduğumuz bilgeliği Divi temasına uygulama ve devam etme zamanı.

Divi ile Viewport Birimleri Nasıl Kullanılır

Şimdiye kadar ele aldığımız her şey oldukça basitti ve neyse ki sizin için bu şekilde kalacak, çünkü Divi sayfaları oluşturmak için görüntü alanı birimlerini kullanmak oldukça basit.

Aslında, bunu başarmak için ihtiyacınız olan tek şey Divi oluşturucuyu biraz tanımak ve bölümlerinize ve modüllerinize nasıl özel CSS ekleyeceğinizi bilmek. Ardından, sonuçlarınızdan memnun kalana kadar kodun ince ayarını yapmanız yeterlidir. Divi Builder'a girdikten sonra, ilgili bölümün veya modülün Ayarlar penceresini başlatmak için şu simgelerden birine tıklamak isteyeceksiniz:

Bu pencerelerin her biri, tek bir hareketle tüm bloğa kolayca CSS eklemenizi sağlayan bir Özel CSS sekmesine sahip olacaktır. Modüllerinizin boyutu üzerinde daha yüksek derecede kontrol sağlamak için, kapsayıcıları yerine doğrudan onlara CSS eklemek isteyeceksiniz:

Test alanımız olarak Divi'nin önceden tanımlanmış düzenlerinden birini kullanalım. Bu, birkaç küçük ince ayar ile Ana Ana Sayfa düzenidir:

Mevcut WordPress sayfalarınızı etkilemeden test sürecimizi takip etmek istiyorsanız, yeni bir sayfa oluşturun, Divi Builder'ı etkinleştirin, Kütüphaneden Yükle'ye tıklayın ve mevcut birden çok önceden tanımlanmış düzenden birini seçin. Size bu akıcı sayfaları tam olarak gösteremediğimiz için bunu yapmanızı öneririz – ayrıca bu, sürece aşina olmanıza yardımcı olacaktır.

Ana Sayfa Temel düzeni, az sayıda modülün basit bir birleşimidir. Bir kaydırıcı, tam genişlikte bir başlık, karşılık gelen simgelerle dört tanıtım yazısı ve bir harekete geçirici mesaj. Şu kaydırıcıyla biraz oynayalım:

Gördüğünüz gibi, kaydırıcının genişliğini görünüm alanının genişliğinin %75'ine, 5rem yazı tipi boyutuna (HTML'nin varsayılan yazı tipi boyutu değerine göre) ayarladık. Efekt, Divi'nin varsayılan yanıt hızına oldukça benzer görünse de, bu yapılandırmayla sitenizin farklı çözünürlüklerde nasıl görüneceği üzerinde daha fazla kontrol uygulayabileceksiniz.

Şimdi, tam genişlikte başlığa geçiyoruz. Ana Sayfa Temel düzeninin yaptığı gibi tek kullandığınız basit bir başlıksa, CSS'nizi Özel CSS sekmesindeki Başlık kutusuna girmek isteyeceksiniz:

Yazı tipi boyutları, rem birimleri kullanılarak oldukça hızlı ölçeklenebilir, bu yüzden dikkatli olun. Söz konusu başlık bu düzende varsayılan olarak 30 piksel olarak ayarlanmışken, yukarıda görüldüğü gibi bu değeri 5rem ile geçersiz kılmak 80 piksellik bir yazı tipi boyutuna eşdeğer olacaktır.

Son örneğimiz için biraz farklı bir şey deneyelim. Fark etmiş olabileceğiniz gibi, Ana Sayfa Temel düzeni, beraberindeki simgelerle birlikte dört metin tanıtım yazısı içerir. Şimdi, bu tanıtım yazılarından sadece ikisinde oldukça basit bir değişiklikle – ikinci ve dördüncü…

…oldukça güzel (ve tamamen duyarlı) bir ölçeklendirme efekti elde edebiliriz:

Gördüğünüz gibi, akıcı Divi sayfaları oluşturmak için görünüm alanı birimlerini CSS'nize uygulamak oldukça basittir. İhtiyacınız olan tek şey, birden fazla çözünürlükte sonuçlarınızdan memnun olana kadar modülünüzün ayarlarını değiştirmek için biraz zaman ve sabır.

Elbette, bu ayarları nasıl tuttuklarını görmek için sürekli olarak test etmeniz gerekecek – sizi orada ele aldık.

Çözüm

Hepimizin bildiği gibi, mobil kullanıma hazır tasarımlar oluşturmanın önemi göz ardı edilemez. Mobil cihazlar o kadar hızlı bir şekilde norm haline geldi ki, yanıt verebilirliği tasarımlarınıza dahil etmemek, başarılarını umursamadığınızı belirtmekle aynı anlama gelebilir. Tüm bunlar, en iyi uygulamalar söz konusu olduğu sürece, çağın ötesinde kalmanın önemli olduğu anlamına gelir.

Divi söz konusu olduğunda, akıcı sayfalar oluştururken aşağıdaki ipuçlarını aklınızda bulundurun:

1. Divi Builder ayarlarındaki yeni özel CSS seçeneği hakkında bilgi edinin.
2. Sayfanızın 'yapı taşları' için değişken kutular oluşturmak için görünüm birimlerini kullanın.
3. Sayfalarınızın birden fazla çözünürlükte geçerli olup olmadığını kontrol ederek CSS'nizi test edin.

Duyarlı tasarım söz konusu olduğunda elinizde herhangi bir püf noktası var mı? Bunları bizimle paylaşın ve aşağıdaki yorumlar bölümüne abone olun!

yurikslb / Shutterstock.com tarafından makale küçük resim