Web sitenizi tüm kararlara uyacak şekilde ayarlayın

Bir web sitesi tasarlarken, aklınızda bulundurmanız gereken en önemli şeylerden biri, sayfanızın her boyuttaki ekran ve cihazlarda doğru görünmesini sağlamaktır. Bu, sayfanıza göreceli genişliğini tanımlayan bir kod satırı ekleyerek ya da minimum ve maksimum çözünürlük değerleri sağlayarak yapılabilir.

Bu hızlı makale, web sitenizin her boyutta ekranda düzgün görünmesini sağlamak için size ipuçları verecektir.

Web Sitenizi Tüm Ekranlara Uygun Olarak Ayarlayın

Bir sayfanın göreceli genişliğini tanımlamak, sayfanın herhangi bir boyuttaki ekranları ayarlayabilmesi nedeniyle web tasarımına gelince önerilen yöntemdir. Birim sayısının yerine yüzde cinsinden genişliği tanımlayarak, sayfanın her bir parçası için belirli bir esneklik düzeyi oluşturarak, bir izleyicinin ekran özelliklerine göre büyümesini veya küçülmesini sağlarsınız.

Bir web sitesinin göreceli genişliğinin tanımı, gövde etiketleri aracılığıyla yapılır. Bir div # body kullanıyorsanız bu etiket uyarlanabilir:

 Vücut {genişliği: 100%;} 

Bu örnekte, kod, görüntüleme ekranının boyutuna bakmaksızın web sitenizin sayfasının pencerenin% 100'ünü alacağını belirtir. Sayfanızın biraz daha küçük görünmesini istiyorsanız, genişliğinizi% 80’den daha az bir değere ayarlamamanızı veya içeriğinizin ekranda çok küçük görünmesi riskini almanızı öneririz. Daha küçük bir genişlik tanımlarsanız, ekranınızı marj: auto kullanarak odaklayabilirsiniz.

Minimum veya Maksimum Genişlik Özellik

Minimum veya maksimum genişlik özelliği, web sitesini tüm çözünürlük türlerine uyacak şekilde ayarlarken de kullanılabilir. Bununla birlikte, Internet Explorer'da minimum genişliğin desteklenmediğini ve daha küçük bir sayfanın daha büyük bir ekrana sığmaması durumunda maksimum genişlik ayarının bozuk sunumla sonuçlanabileceğini not etmek önemlidir.

Asgari 600 piksel genişliğinde ve en fazla 2000 piksel genişliğinde ortalanmış, % 90 sayfa genişliğini gösteren bir web sitesine bir örnek:

 Vücut {genişliği: 90%; marjı: otomatik; min-genişliği: 600 pikseldir ve maksimum genişliği: 2000 piksel}