Duyarlı Tasarıma Giriş - Webflow Yardım
İçeriğin yeniden akışı, sabit boyutlandırma, göreceli boyutlandırma ve kırılma noktalarının (medya sorguları) duyarlı tasarımlar oluşturmaya nasıl yardımcı olduğunu öğrenin.
Mobil cihazınızda bir siteyi ziyaret ettiğinizde, daha küçük bir ekrana sıkıştırılmış bir masaüstü sürümünü görebilirsiniz—içeriği görmek için yakınlaştırma ve kaydırma yapmanız gerekebilir. Ayrıca, masaüstü sürümünü üstün kılan içerik ve deneyimden yoksun, sulandırılmış bir mobil sürüme de denk gelebilirsiniz. Ancak umarız ki, tarayıcı genişliğine göre içeriği yeniden akış ve yeniden konumlandıran duyarlı bir web sitesi görürsünüz.
Burada ele alacağımız duyarlı tasarımın üç farklı yönü vardır:
- İçeriğin yeniden akışı
- Sabit boyutlandırma
- Göreceli boyutlandırma
- Kırılma noktaları (medya sorguları)
İçeriğin Yeniden Akışı
İçeriğin yeniden akışı, içeriğin tarayıcının görünüm alanı genişliğine göre ayarlanması anlamına gelir. Örneğin, varsayılan ayarlara sahip bir paragraf, tarayıcının genişliği küçüldükçe içeriğini otomatik olarak sarar. Bu davranış, Tasarımcı tuvalinin kenarını sürükleyerek taklit edilebilir.
Sabit Boyutlandırma
Göreceli Boyutlandırma
Bu, bir öğenin boyutunu tarayıcı genişliği veya bir üst öğe gibi diğer şeylere göre ayarlamak anlamına gelir. Örneğin, bir görüntü için piksel tabanlı bir boyut kullanmak yerine, %, VW (görünüm alanı genişliği) veya VH (görünüm alanı yüksekliği) gibi farklı birimler kullanmayı düşünün. Bir görüntüde % kullanırsanız ve tarayıcı genişliğini ayarlarsanız, uyum sağlayacağını görebilirsiniz, oysa px tabanlı bir görüntü uyum sağlamaz.
Kırılma Noktaları
Düzenler genellikle bir resmin genişliğini yönetmekten çok daha karmaşıktır. Kırılma noktalarını (medya sorguları olarak da bilinir) kullanmak, yalnızca içeriğin yeniden akışını test etmenizi sağlamakla kalmaz, aynı zamanda farklı cihaz genişlik aralıklarına göre tasarımı ve düzeni değiştirmenize de olanak tanır.
Daha fazla bilgi edinin: