Birçok duyarlı web tasarımı öğrencisi, genişlik değerleri için yüzdeleri kullanmakta zorlanır. Özellikle, tarayıcının bu yüzdeleri nasıl hesapladığı konusunda kafa karışıklığı var. Aşağıda, duyarlı bir web sitesinde genişlik hesaplamaları için yüzdelerin nasıl çalıştığına dair ayrıntılı bir açıklama bulacaksınız.
Genişlik Değerleri için Pikselleri Kullanma
kullandığınızda piksel genişlik değeri olarak sonuçlar çok basittir. Eğer kullanırsan CSS bir belgenin başlığındaki bir öğenin genişlik değerini 100 piksel genişliğe ayarlamak için, o öğe web sitesinin içeriğinde veya altbilgisinde veya sayfanın diğer alanlarında 100 piksel genişliğe ayarladığınız boyutla aynı boyutta. Pikseller mutlak bir değerdir, bu nedenle belgenizin neresinde bir öğe görünürse görünsün 100 piksel 100 pikseldir. Ne yazık ki, piksel değerlerinin anlaşılması kolay olsa da, duyarlı web sitelerinde iyi çalışmazlar.
Ethan Marcotte terimi icat etti “Duyarlı web tasarımı”, bu yaklaşımı 3 temel ilke içerdiğini açıklıyor:
- Bir akışkan ızgarası
- Akışkan ortam
- Medya sorguları
Bu ilk iki nokta, akışkan ızgara ve akışkan ortam, boyutlandırma değerleri için pikseller yerine yüzdeler kullanılarak elde edilir.
Genişlik Değerleri için Yüzdeleri Kullanma
Bir öğe için genişlik oluşturmak üzere yüzdeleri kullandığınızda, öğenin görüntülediği gerçek boyut, belgede nerede olduğuna bağlı olarak değişir. Yüzdeler göreli bir değerdir, yani görüntülenen boyut belgenizdeki diğer öğelere göredir.
Örneğin, genişliğini ayarlarsanız resim %50'ye kadar, bu, görüntünün normal boyutunun yarısında görüntüleneceği anlamına gelmez. Bu yaygın bir yanlış anlamadır.
Bir görüntü aslında 600 piksel genişliğindeyse, onu %50'de görüntülemek için bir CSS değeri kullanmak, web tarayıcısında 300 piksel genişliğinde olacağı anlamına gelmez. Bu yüzde değeri, görüntünün kendisinin gerçek boyutuna değil, o görüntüyü içeren öğeye göre hesaplanır. Kap (bir bölme veya başka bir HTML öğesi olabilir) 1000 piksel genişliğindeyse, bu değer kapsayıcı genişliğinin %50'si olduğu için görüntü 500 pikselde görüntülenir. Kapsayıcı öğe 400 piksel genişliğindeyse, bu değer kapsayıcının %50'si olduğundan, görüntü yalnızca 200 pikselde görüntülenir. Buradaki söz konusu resim, tamamen onu içeren öğeye bağlı olan %50'lik bir boyuta sahiptir.
Duyarlı tasarımın akışkan olduğunu unutmayın. Düzenler ve boyutlar değiştikçe değişecektir. ekran boyutu/cihaz değişiklikleri. Bunu fiziksel, web dışı terimlerle düşünürseniz, ambalaj malzemesiyle doldurduğunuz bir karton kutuya sahip olmak gibidir. Kutunun yarısı o malzeme ile doldurulmalı diyorsanız ihtiyacınız olan ambalaj miktarı kutunun boyutuna göre değişiklik gösterecektir. Aynısı web tasarımındaki yüzde genişlikleri için de geçerlidir.
Diğer Yüzdelere Dayalı Yüzdeler
Görüntü/kapsayıcı örneğinde, duyarlı görüntünün nasıl görüntüleneceğini göstermek için içeren öğe için piksel değerleri kullandık. Gerçekte, içeren öğe de bir yüzde olarak ayarlanır ve bu kap içindeki görüntü veya diğer öğeler, değerlerini yüzde yüzdesine dayalı olarak alır.
İşte başka bir örnek.
Diyelim ki tüm sitenin bir "konteyner" sınıfı (genel bir web tasarımı uygulaması) olan bir bölüm içinde yer aldığı bir web siteniz var. Bu bölümün içinde, sonunda 3 dikey sütun olarak görüntülemek üzere biçimlendireceğiniz diğer üç bölüm vardır.
Şimdi, bu "konteyner" bölümünün boyutunu %90 olarak ayarlamak için CSS'yi kullanabilirsiniz. Bu örnekte, kap bölümü, herhangi bir belirli değere ayarlamadığımız gövde dışında, onu çevreleyen başka bir öğeye sahip değildir. Varsayılan olarak gövde, tarayıcı penceresinin %100'ü olarak işlenecektir. Bu nedenle, "konteyner" bölümünün yüzdesi, tarayıcı penceresinin boyutuna bağlı olacaktır. Bu tarayıcı penceresinin boyutu değiştikçe, bu “konteynerin” boyutu da değişecektir. Yani tarayıcı penceresi 2000 piksel genişliğindeyse, bu bölme 1800 pikselde görüntülenecektir. Bu, tarayıcının boyutu olan 2000'in (2000 x .90 = 1800) yüzde 90'ı olarak hesaplanır.
"Kapsayıcı" içinde bulunan "sütun" bölümlerinin her biri %30'luk bir boyuta ayarlanırsa, bu örnekte bunların her biri 540 piksel genişliğinde olacaktır. Bu, kapsayıcının (1800 x .30 = 540) oluşturduğu 1800 pikselin %30'u olarak hesaplanır. Bu kapsayıcının yüzdesini değiştirseydik, bu iç bölmeler, o kap öğesine bağımlı olduklarından, oluşturdukları boyutta da değişirdi.
Tarayıcı pencerelerinin 2000 piksel genişliğinde kaldığını varsayalım, ancak kapsayıcının yüzde değerini %90 yerine %80 olarak değiştiriyoruz. Bu, şimdi 1600 piksel genişliğinde oluşturulacağı anlamına gelir (2000 x .80 = 1600). 3 "sütun" bölümünün boyutu için CSS'yi değiştirmesek ve onları %30'da bıraksak bile, boyutlandırıldıkları bağlam olan içerme öğeleri olduğundan, şimdi farklı şekilde oluştur değişti. Bu 3 bölüm şimdi her biri 480 piksel genişliğinde, yani 1600'ün %30'u veya kapsayıcının boyutu 1600 x .30 = 480 olacak şekilde oluşturulacaktır.
Bunu daha da ileri götürürsek, bu "sütun" bölümlerinden birinin içinde bir resim varsa ve bu resim yüzde kullanılarak boyutlandırıldıysa, boyutlandırma bağlamı "sütun"un kendisi olacaktır. Bu "sütun" bölümünün boyutu değiştikçe, içindeki görüntü de değişir. Dolayısıyla, tarayıcının veya "kapsayıcının" boyutu değişirse, bu üç "sütun" bölümünü etkiler ve bu da sırayla, "col" içindeki görüntünün boyutunu değiştirin. Gördüğünüz gibi, yüzdeye dayalı boyutlandırma söz konusu olduğunda bunların hepsi birbiriyle bağlantılıdır. değerler.
Bir web sayfasının içindeki bir öğenin, genişliği için bir yüzde değeri kullanıldığında nasıl oluşturulacağını düşündüğünüzde, o öğenin sayfa işaretlemesinde bulunduğu bağlamı anlamanız gerekir.
Özetle
Yüzdeler, duyarlı web sitelerinin düzenini oluşturmada kritik bir rol oynar. Görüntüleri duyarlı bir şekilde boyutlandırıyor veya boyutları gerçekten akıcı bir ızgara oluşturmak için yüzde genişlikleri kullanıyor olun. birbirine göredir, bu hesaplamaları anlamak, istediğiniz görünümü elde etmek için gerekli olacaktır. arzu etmek.