Web tasarımında yanıt verme artık isteğe bağlı değildir. Neredeyse hiç kimse öncülü inkar etmeyecek – son on yıldır mağarada yaşamadıkça. Gerçek tartışma, tasarımınızı duyarlı hale getirmenin en iyi yolunda yatmaktadır. Tasarımınızı hücresel bir bakış açısından mı başlatmalı ve sıradan bir görünüm alanına giden yolunuzu oluşturmalı mısınız? Son tasarımınızı hücresel olarak ayarlamaya devam etmeli misiniz? Bu karmaşık bir seçim. Herkesin iş akışı farklıdır ve duyarlı tasarıma kendi yaklaşımınızı geliştirmişsinizdir. Neredeyse mutlak olan bir kesin olarak söyleyebileceğimiz bir şey, ViewPort birimine (örneğin VW, VH ve Fren) CSS’ye girmeye başlamadıysanız, onu kaçırmanızdır.
Pürüzsüz bir sayfa oluşturmak için bu birimleri divi olarak birleştirmeye başlamadan önce, normal ölçüm birimini kullanmaktan daha tercih ettiğini tam olarak inceleyelim. Tam ViewPort birimi nedir? VW (görünüm alanının genişliği) ve VH (görünüm alanının yüksekliği), ölçümlerine bakılmaksızın, verilen görünüm alanının boyutunun tam olarak% 1’ini temsil eden bir uzunluk birimidir. REM (‘kök em’ kısa), özellikle yazı tipi boyutu ile ilişkili olmasına rağmen, işlevinde de benzer ve çoğu tarayıcıda 16 piksele varsayılan olmalıdır kök yazı tipi yazı tipi boyutu değerinin adını alır.
Ayrıca, her biri VMIN (Minimum ViewPort) ve VMAX (Maksimum ViewPort) gibi kullanım için kullanılabilir (VW ve VH’den daha nadiren kullanılmasına rağmen), her biri ViewPort’un daha küçük boyutlarının% 1’ini ifade eden birkaç görüntüporpor birimleri vardır. ve daha büyük boyutların% 1’i. Ayrıca, ne kadar spesifik oldukları için VMIN ve en çok VMIN’den daha az nadiren olan eski (x-yükseklik) ve ch (karakter birimleri) var. Örneğin, x-yükseklik, yaklaşık 0.5m’ye (yani 8 piksel veya 6 puan) eşit olan temel değeri belirlemek için ‘x’ küçük harf boyutunu kullanır ve karakter birimleri ‘0’ boyutunu olarak kullanır. Onların referans noktası. Uzun hikaye kısadır – Kendinizi diğer insanların CSS’lerini okurken bulursanız ve bu göreceli birimi bulursanız, bunları en yakın ruh sağlığı kurumuna yönlendirmelisiniz. Oldukça ilginç olan tarayıcı aslında tüm tarayıcı penceresini genişlik açısından hesaplar, yani kaydırma çubuğunu bu boyuta girerler. Elementin genişliğini 100VW değerine ayarlamaya çalışırsanız, yatay çubuğu görünmeye zorlar, çünkü görünümünüzü hafifçe gereceksiniz. ViewPort birimini kullanmanın faydaları nelerdir? Basitçe söylemek gerekirse, ViewPort birimini doğru uygulayarak, basit bir uyarlanabilir web sitesinden çok farklı bir duyarlı efekt oluşturabilirsiniz. Duyarlı tasarım, görünüm alanınız değiştiğinde boyutunu otomatik olarak ayarlarken, uyarlanabilir tasarım, medya sorgularının kullanımı sayesinde görünüm alanınız belirli bir boyuta ulaştıktan sonra kendini düzeltir.
Avantaj estetik bir bakış açısıyla açıktır – sıvı tasarım daha iyi görünür. Buna ek olarak, ünitenin üzerindeki görünümün kullanılması, uygulanması ve sürdürülmesi daha kolay olduğu için hala ek avantajlar sağlar. Uyarlanabilir bir tasarım uygulamak, birçok durumda, mükemmel piksel olması gereken belirli değerlerle çeşitli medya sorgularının eklenmesini gerektirir. Dahası, ViewPort birimini kullanmak, metni her zaman rahat bir uzunlukta olacak şekilde kolayca tasarlamanızı sağlar, daha sonra çözünürlüğünüz ayarlandığında deneyimi yukarı veya aşağı yapar. Ayrıca, metninizin her zaman orantılı olması için CSS’yi de değiştirebilirsiniz: H1 {
yazı tipi boyutu: 6VW;
}
H2 {
yazı tipi boyutu: 3VW;
}
P {
yazı tipi boyutu: 2vmin;
} Bu örnekte, metniniz her zaman birbiriyle orantılı kalır ve değiştiğinde görünüm portu genişliğinizle. Hatta daha ileri gidebilir ve bu birimleri, metniniz için, doğru genişlikte her zaman daha önce de belirttiğimiz gibi optimal çizgi uzunluğunu sağlayacak bir kap yapmak için kullanabilirsiniz. Diğer kısa ve tatlı örneklere bakalım. Bu kez, akan sayfaların temel bir gösterisi olarak işlev görecek görünüm birimini kullanarak birkaç kutu yapacağız. HTML ile başlıyoruz:

Sıvı duyarlılığı örneği

Sonra CSS: Body {
Dolgu: 3VH 3VW;
Metin-align: merkez;
}
.
Ekran: satır içi blok;
Genişlik: 16VW;
Yükseklik: 60vmin;
Marj: 2VH 2VW;
Arka Plan rengi: #81D8D0;
} Kodu görmek, tam olarak hangi işlevleri bulmak için ihtiyacınız olan her şey olmalıdır. İlk olarak, yanıt verme sınıfına sahip dört div yaptık, sonra onlara geniş, uzun ve marj verdik – hepsi Viewport birimini kullandı. Orada özlediğimiz tek şey,% 100 pürüzsüz (çok temel olsa da) bir sayfaya sahip olmak için H1 göreceli boyutu vermektir, bu yüzden devam edelim ve düzeltelim: vücut {
Dolgu: 3VH 3VW;
Metin-align: merkez;
}
H1 {
yazı tipi boyutu: 6VW;
}
.
Ekran: satır içi blok;
Genişlik: 16VW;
Yükseklik: 60vmin;
Marj: 2VH 2VW;
Arka Plan rengi: #81D8D0;
} Bu, ViewPort birimi kullanılarak elde edilebileceklerin temelidir, ancak beklediğiniz gibi, bazı insanlar onu daha fazla uyguladı ve onu kullanarak birkaç harika şeyi birleştirdi – örneğin Codepen’deki bu MacBook CSS’ye bakın. CSS’yi görürseniz, CSS’nin çok güzel bir etki elde etmek için eski bir piksel değeri ile görünüm portu birimini nasıl birleştirdiğini fark etmiş olabilirsiniz. Demek istediğimize göre, CSS ile ilgili diğer tüm şeyler gibi, gökyüzü onunla yapılabilecek sınırlardır.
Arkamızdaki temel bilgilerle, yeni keşfedilen bilgeliğimizi Divi temasına sürdürme ve uygulamanın zamanı geldi. Viewport birimini Divi ile nasıl kullanılır Şimdiye kadar, tartıştığımız her şey oldukça kolay ve neyse ki sizin için böyle kalacaktır, çünkü Divi sayfasını çok basit hale getirmek için Viewport ünitesini kullanmak. Aslında, bunu başarmanız gereken şey, kendinizi bir divi üreticisi ile biraz tanımak ve bölümünüze ve modülünüze nasıl özel CSS ekleyeceğinizi bilmektir. Sonra, sonuçlarınızdan memnun olana kadar sadece kodla uğraşmak meselesidir. Divi Builder’da bulunduktan sonra, uygun bölümden veya modülden Ayarlar penceresini başlatmak için bu simgelerden birini tıklamak isteyeceksiniz: Bu pencerelerin her birinin, tüm bloklara kolayca CSS eklemenizi sağlayan özel bir CSS sekmesi olacaktır. bir harekette. Modülünüzün boyutu üzerinde daha yüksek bir kontrol seviyesi sağlamak için, kapsayıcıya değil, doğrudan modüle CSS eklemelisiniz:
Testimizin temeli olarak Divi standart düzeninden birini kullanalım. Bu, bazı küçük ayarlarla temel ana sayfanın düzenidir:
Mevcut WordPress sayfanızı etkilemeden test sürecimizi takip etmek istiyorsanız, yeni bir sayfa oluşturun, Divi Builder’ı etkinleştirin, Kütüphaneden Yük’i tıklayın ve mevcut birkaç standart düzenden birini seçin. Bunu yapmanızı tavsiye ediyoruz, çünkü bu düzgün sayfaları eylem artıda gösteremeyiz, bu sürece alışmanıza yardımcı olacaktır.

Temel ana sayfanın düzeni, az sayıda modülün basit bir kombinasyonudur. Kaydırıcı, tam geniş başlık, uygun simgelerle dört açıklama ve harekete geçme daveti. Kaydırıcı ile biraz oynayalım: Gördüğünüz gibi, kaydırıcı genişliğini ViewPort genişliğinin% 75’ine, 5REM yazı tipi boyutuna (HTML varsayılan yazı tipi boyutu değerine göre) ayarladık. Etki Divi’nin varsayılan yanıt verebilirliğine çok benzese de, bu yapılandırma ile farklı çözünürlüklerde sitenizin görünümü üzerinde daha fazla kontrol gerçekleştirebilirsiniz. Şimdi, tam geniş bir başlığa geçiyor. Kullandığınız her şey temel ana sayfa düzeni gibi basit bir başlıksa, CSS’nizi CSS Kustom sekmesindeki başlık kutusuna eklemek isteyeceksiniz: