Duyarlı Düzenler Oluşturmak İçin 5 Yararlı İpucu

Gerçekten harika bir düzen oluşturmak için tüm zor işi yaptığınızı hayal edin. Ama sonra, tarayıcı pencerenizi biraz daha küçülttüğünüzde, taşan bir şey bulursunuz. Sorunu çözmek için bir medya sorgusu atarsınız. Ancak pencereyi yeniden boyutlandırdığınızda başka bir şeyin kırıldığını fark edersiniz.

Bu, çoğu CSS geliştiricisinin bir noktada deneyimleyeceği bir şeydir. Neyse ki, bir şeyleri geliştirmeyi ve iyi çalışmasını sağlamayı çok daha kolaylaştıran birkaç modern CSS çözümümüz var. Bu makale, web siteleri geliştirirken akılda tutulması gereken 5 yararlı uygulamayı incelemektedir. Bu ipuçları, tasarımınızda rahatsız edici kesintilerden kaçınmanıza yardımcı olacaktır.

1. Küresel Bir Stil Sayfasıyla Başlayın

CSS yazarken her zaman genel stil ile başlayın. Düzen hakkında endişelenme. Bunun yerine tipografi, renkler ve arka planlar gibi genel stiller ayarlayın. Kenar boşluklarını sıfırlayın, bağlantılardan alt çizgileri kaldırın vb.

Genel stili tamamladıktan sonra, düzeni oluşturmaya ve düzen içindeki öğeleri tek tek hedeflemeye başlayabilirsiniz. Temel olarak, en baştan başlayın ve ardından öğelere geçin.

Aşağıdaki CSS örneği, tüm öğelerin kenar boşluğunu 0'a sıfırlar, tüm ana başlıkların tipografisini ve rengini tanımlar ve hepsine tutarlı bir kenar boşluğu ekler:

vücut,
h1,
h2,
h3,
P {
marj: 0;
}
h1,
h2,
h3 {
renk: mavi;
font ailesi: "Verdana" sans Serif;
yazı tipi ağırlığı: 900;
satır yüksekliği: 1;
}
h2,
h3,
P {
kenar boşluğu: 1rem;
}

Artık tüm temel stilleri tanımladığınıza göre oradan oluşturabilirsiniz. Örneğin, kapsayıcı öğeye dolgu ekleyebilirsiniz. Bu, içeriği tarayıcınızın kenarlarından uzaklaştırır. Sonra bir uygulayabilirsiniz maksimum genişlik görüntülere, böylece kaplarının genişliğine uyum sağlayabilirler. Buradaki nokta, belirli unsurları hedeflemeden önce genel unsurlardan başlamaktır.

Bir kez daha, düzen duyarlı olacaktır. Böylece ekran boyutunu değiştirdikçe, öğelerin boyutu da buna göre değişecektir. Bir geliştirici olarak, bu CSS ipuçlarından ve püf noktalarından haberdar olmalısınız. üretkenliğinizi bir sonraki seviyeye taşıyabilecekleri için.

2. Sabit Boyutlardan Kaçının

Mizanpajları düşünmeye başladığınızda, aklınızda bulundurmanız gereken ilk şey sabit boyutlardan kaçınmaktır. Sabit boyutlar, aşağıdaki özelliklere atıfta bulunur genişlik: 1000 piksel, yükseklik: 200 piksel, ve benzeri. Sabit bir yükseklik veya genişlik belirlemek, yalnızca uzun vadede size sorun çıkaracaktır.

Bunun yerine uyarlanabilir yükseklikler ve genişlikler kullanın. bir yol kullanmaktır minimum yükseklik Ve minimum genişlik yerine yükseklik Ve Genişlik. Örneğin, bir öğenin genişliğini 600px olarak ayarladığınızı varsayalım. 600px'in altına indiğinizde içerik taşacaktır:

Bunun yerine, özelliği şu şekilde değiştirmelisiniz: Genişlik ile maksimum genişlik. İle maksimum genişlik, tarayıcı penceresi daraldıkça öğenin küçülmesine izin verilir. Pencere genişlerse, metin orijinal uzunluğuna geri döner. İşte sonuç:

bu aynı şey için yükseklik. Örneğin, ayarladığınızı varsayalım. yükseklik bir başlığın sabit bir değere 200 piksel.

başlık {
yükseklik: 200piksel;
görüntülemek: Kafes;
yer öğeleri: merkez;
}

Bu, başlıktaki her şeyi mükemmel bir şekilde ortalar. Ancak tarayıcı penceresini daralttığınızda, içerik sonunda kabından dışarı akacaktır. Bunun nedeni, başlıkta sabit bir yükseklik belirlemenizdir.

Genel olarak, yükseklik Ve Genişlik ikisi de tehlikeli özelliklerdir. Çözüm, uyarlanabilir yükseklik ve genişlikleri kullanmaktır, yani, dakika- Ve maksimum yükseklik, Ve dakika- Ve maksimum genişlik. Bu durumlarda, tarayıcı içeriğin uzadığı durumlarla karşılaşırsa, başlık buna uyum sağlamak için büyüyecektir.

Bu, kaçınmanız gereken en yaygın CSS hataları.

3. Web Sitenizin Varsayılan Olarak Duyarlı Olduğunu Unutmayın

Tek bir CSS kodu satırı yazmadan önce bile web sitenizin duyarlı olduğunu unutmayın. Bu zihniyet, tasarım sürecini aşırı karmaşık hale getirmekten kaçınmanıza yardımcı olabilir. Düzen, büyük ekranlarda ve küçük ekranlarda çalışacak. Güzel olmayabilir. Büyük ekranlarda okumak bile zor olabilir. Ancak web sitesi, boyutu ne olursa olsun görünüme uyum sağlar.

Elbette resimler taşabilir ve metin çok küçük olabilir. Ancak varsayılan düzende hiçbir şey kaybetmezsiniz. Metniniz kırılmayacak ve tüm öğeler ekranda görünecektir.

Bu gerçeği anlamak ve benimsemek, CSS kodunuzu yazarken gerçekten yardımcı olabilir. Sorunlarla karşılaştığınızda, hatanın yazdığınız CSS'den kaynaklandığından emin olacaksınız. Bu, sorunu bulmayı ve düzeltmeyi kolaylaştırır.

Yalnızca karmaşıklık eklemek için medya sorgularını kullanmayı deneyin. Örneğin, düzeninizin daha büyük ekranlarda üç sütun olmasını istediğinizde. Aksi takdirde, bunları kullanmayın. Medya sorgularına derinlemesine dalmak için şu makalemizi okuyun: medya sorguları kılavuzu.

İşte bir senaryo. Sınıf adına sahip öğenin .bölmek içinde üç unsur vardır. Aşağıdaki CSS ile üç sütunlu bir düzen oluşturulacaktır:

.bölmek {
görüntülemek: esnek;
esnek yön: sıra;
açıklık: 2rem;
}

Daha küçük ekranlarda (40em geniş veya daha az), her şeyin tek bir sütunu işgal etmesini istersiniz. Yani şunu yapacaksın:

@medya(maksimum genişlik: 40em) {
.bölmek {
görüntülemek: engellemek;
 }
}

Burada, varsayılan hizalamayı (üç sütun) geçersiz kılıyorsunuz. Ancak tarayıcı kullandığı için medya sorgusu gereksizdir. Ekran bloğu varsayılan olarak. Bu nedenle, açıkça tanımlamanıza gerek yoktur.

Bunu göz önünde bulundurarak, yalnızca büyük ekranlar için geçerli olan tek bir medya sorgusu kullanmak için kodunuzu yeniden düzenleyebilirsiniz. Ekran 40em'den geniş olduğunda orada üç sütuna geçeceksiniz:

@medya(maksimum genişlik: 40em) {
.bölmek {
görüntülemek: esnek;
esnek yön: sıra;
açıklık: 2rem;
 }
}

Küçük ekranlarda, tarayıcı her şeyi tek bir sütunda toplar. Ancak tarayıcı kullandığı için bunu belirtmeniz gerekmez. Ekran bloğu varsayılan olarak. Bu nedenle, karmaşıklık eklemek için yalnızca medya sorgularını kullandınız.

Dolayısıyla, karmaşıklığı eklemek ve ardından bir grup özelliği geçersiz kılmak yerine, artık ihtiyaç duyduğunuzda karmaşıklığı ekliyorsunuz. Çoğu zaman, yalnızca ihtiyacınız olacak minimum genişlik medya sorguları. Önce mobil ile başlayın, ardından site mobil cihazlarda harika göründüğünde, masaüstü sürümü için karmaşıklığı (ör. sütunlar) ekleyin.

5. Modern CSS'den Yararlanın

Modern CSS yaklaşımlarını kullanarak, hizalama sorunlarından ve kesme noktalarından kurtulabilir ve özgün tasarıma ulaşmaya doğru ilerleyebilirsiniz.

Bunu yapmanın bir yolu şudur:

h1 { yazı tipi boyutu: kelepçe (3rem, 1rem + 10vw, 7rem)}

Bu kelepçeler h1 minimum ve maksimum yazı tipi boyutu arasında. Gitmesini istediğimiz en küçük 3rem ve en yüksek 7rem. Orta, yineleyeceğimiz şeydir (1rem + 10 vw). Sonuç olarak, görünüm alanı küçüldükçe başlık otomatik olarak küçülecek ve büyüdükçe büyüyecektir.

Modern CSS Hakkında Daha Fazlasını Öğrenin

CSS yıllar içinde çok gelişti. Bugün, CSS'de öğeleri konumlandırmak için daha yeni ve daha iyi yaklaşımlara sahibiz. Bu makalede, bu uygulamalardan bazılarına değindik ve bunların yaygın tasarım hatalarından kaçınmanıza nasıl yardımcı olabileceğini vurguladık. Modern CSS'yi öğrenmenin en iyi yollarından biri, bir HTML tablosu tasarlamak için modern CSS'yi kullanmak gibi uygulamalı yaklaşımdır.