Duyarlı web tasarımının birçok öğrencisi, genişlik değerleri için yüzdelerini kullanmanın zor zamanlarına sahiptir. Özellikle, tarayıcının bu yüzdeleri nasıl hesapladığıyla ilgili karışıklık var. Aşağıda, yüzdelerin yanıt veren bir web sitesinde genişlik hesaplamaları için nasıl çalıştığına dair ayrıntılı bir açıklama bulacaksınız.
Genişlik Değerleri için Piksel Kullanımı
Pikselleri genişlik değeri olarak kullandığınızda, sonuçlar çok basittir. Bir belgenin başlığındaki bir öğenin genişlik değerini 100 piksel genişliğe ayarlamak için CSS kullanırsanız, bu öğe web sitesinin içeriği veya altbilgisinde veya diğer alanlarındaki 100 piksel genişliğinde ayarladığınız boyut ile aynı boyutta olacaktır. sayfa. Pikseller mutlak bir değerdir, bu nedenle belgenizde nerede bir öğe görünürse bulunsun 100 piksel 100 pikseldir. Ne yazık ki, piksel değerlerini anlamak kolay olsa da, duyarlı web siteleriyle iyi çalışmazlar.
Ethan Marcotte, bu yaklaşımı 3 temel prensibi içererek açıklayan “duyarlı web tasarımı” terimini belirledi:
- Bir akışkan ızgarası
- Sıvı medya
- Medya sorguları
İlk iki nokta, bir akışkan ızgarası ve akışkan medya değerleri boyutlandırma için piksel yerine yüzdeler kullanılarak elde edilir.
Genişlik Değerleri için Yüzdeleri Kullanma
Bir eleman için bir genişlik oluşturmak için yüzdeler kullandığınızda, öğenin görüntülediği gerçek boyut, belgede nerede bulunduğ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öre değişir.
Örneğin, bir resmin genişliğini% 50 olarak ayarlarsanız, bu Görüntünün normal boyutunun yarısında görüntüleneceği anlamına gelir. Bu yaygın bir yanlış anlamadır.
Bir görüntü doğal olarak 600 piksel ise,% 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 değil yerel görüntünün bulunduğu öğeye bağlı olarak hesaplanır. Kapsayıcı (bir bölüm veya başka bir HTML öğesi olabilir) 1000 piksel genişliğinde ise, bu değer kapsayıcının genişliğinin% 50'si olduğundan, görüntü 500 piksel olarak görüntülenir. İçeren öğe 400 piksel genişliğinde ise, görüntü yalnızca 200 pikselde görüntülenir, çünkü bu değer kabın% 50'sidir. Söz konusu resmin, onu içeren öğeye tamamen bağlı olan% 50'lik bir boyutu vardır.
Unutmayın, duyarlı tasarım akışkandır. Ekran boyutu / cihaz değiştikçe düzenler ve boyutlar değişecektir. Bunu fiziksel, web dışı terimlerle düşünürseniz, ambalaj malzemesiyle doldurduğunuz bir karton kutuya sahip olmak gibidir. Kutunun bu malzemeyle yarı dolu olması gerektiğini söylerseniz, ihtiyacınız olan ambalaj miktarı kutunun boyutuna bağlı olarak değişecektir. Aynı şey web tasarımındaki yüzde genişlikleri için de geçerlidir.
Diğer Yüzdelere Göre Yüzdeler
Görüntü / kapsayıcı örneğinde, yanıt veren görüntünün nasıl görüntüleneceğini göstermek için içerik elemanını piksel değerleri kullandık. Gerçekte, içerilen eleman bir yüzde olarak da ayarlanacaktır ve bu konteynerin içindeki görüntü ya da diğer elemanlar, değerlerini bir yüzde yüzdesine göre alacaklardır.
İşte bunu pratikte gösteren başka bir örnek.
Tüm sitenin bir “konteyner” sınıfıyla (ortak bir web tasarım uygulaması) bir bölüm içinde yer aldığı bir web sitenizin olduğunu varsayalım. Bu bölümün içinde en sonunda 3 dikey sütun olarak görüntülenecek üç bölüm var. Bu HTML şöyle görünebilir:
Şimdi, bu “konteyner” bölümünün boyutunu% 90 olarak belirlemek için CSS kullanabilirsiniz. Bu örnekte, kapsayıcı bölümün, onu herhangi bir özel değere ayarlamamış olan gövde dışında çevreleyen başka bir elemanı yoktur. 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 dayalı olacaktır. Tarayıcı penceresi boyut olarak değiştiğinden, bu "kapsayıcı" nın boyutu da değişecektir. Yani tarayıcı penceresi 2000 piksel genişliğinde ise, bu bölüm 1800 piksel olarak görüntülenecektir. Bu, tarayıcının boyutu olan 2000'in 90 (2000 x .90 = 1800)) olarak hesaplanmıştır. “Kap” içinde bulunan “col” bölümlerinden her biri% 30'luk bir boyuta ayarlanırsa, bu örnekte her biri 540 piksel genişliğinde olacaktır. Bu, kapsayıcının oluşturduğu 1800 pikselin% 30'u olarak hesaplanır (1800 x .30 = 540). Bu konteynerin yüzdesini değiştirirsek, bu iç bölünmeler, elementi içerdiklerine bağlı olduklarından, işlemiş oldukları boyutta da değişecektir. Tarayıcı pencerelerinin 2000 piksel genişliğinde olduğunu varsayalım, ancak kabın yüzde değerini% 90 yerine% 80 olarak değiştiriyoruz. Yani şimdi 1600 piksel genişliğinde (2000 x .80 = 1600) işlem görecek. 3 “col” bölümümüzün büyüklüğü için CSS'yi değiştirmememiz ve% 30'luk bir oranda bırakmasak bile, boyutlandıkları bağlamda, içerdikleri elementler değiştiği için artık farklılaşacaktır. Bu 3 bölüm artık her biri 480 piksel genişliğinde olacak, bu da 1600'lük% 30'luk veya kabın büyüklüğü (1600 x .30 = 480). Bunu daha da ileri götürürsek, bu “col” bölümlerinden birinde bir görüntü varsa ve bu görüntü bir yüzde kullanarak boyutlandırıldıysa, boyutlandırmanın içeriği “col” ın kendisi olacaktır.Bu “col” bölümü boyut olarak değiştiği için, içindeki görüntü de öyle olurdu. Dolayısıyla, tarayıcı ya da “kapsayıcı” boyutu değiştiyse, bu, “col” bölümlerini etkileyecektir. Bu, “col” içindeki görüntünün boyutunu değiştirecektir. Görebildiğiniz gibi, bunların hepsi Yüzdelik odaklı boyutlandırma değerleri söz konusu olduğunda bağlanır. Bir web sayfasının içindeki bir öğenin, genişliği için bir yüzde değeri kullanıldığında nasıl görüneceğini düşündüğünüzde, bu öğenin sayfanın işaretlemesinde yer aldığı bağlamı anlamanız gerekir. Yüzdeler, duyarlı web sitelerinin yerleşimini oluştururken kritik bir rol oynar. Boyutları birbiriyle göreceli olarak gerçek bir akışkan ızgarası yapmak için resimleri esnek bir şekilde boyutlandırıyor veya genişlik yüzdesini kullanıyor olsanız da, bu hesaplamaları anlamak istediğiniz görünümü elde etmek için gerekli olacaktır. Özetle
