Web tarayıcılarının yüzde değerleri kullanarak bir ekranı nasıl belirlediğini öğrenin
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ğerleri anlamak kolay olsa da, duyarlı web sitelerinde 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ğerlerin boyutlandırılması 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 görüntünün genişliğini% 50 olarak ayarlarsanız, bu, resmin normal boyutunun yarısında görüntüleneceği anlamına gelmez. 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, içeriğin eninin% 50'si olduğundan, görüntü 500 pikselde 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
Resim / 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ı için piksel değerleri kullandım. Gerçekte, içerilen eleman bir yüzdeye de ayarlanacaktır ve bu kap içindeki görüntü veya başka elemanlar, değerlerini yüzde yüzdesine dayalı olarak alacaktı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 dayanacaktı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.
“Konteynır” 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). Eğer o konteynerin yüzdesini değiştirirsek, bu iç bölünmeler, içerdiği elemente bağımlı 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 etkileyecek ve bu da “col” içindeki görüntünün boyutunu değiştirecektir. Görebildiğiniz gibi, hepsi yüzdelik odaklı boyutlandırma değerlerine gelir.
Bir web sayfasının içindeki bir öğenin, genişliği için bir yüzde değeri kullanıldığında nasıl işleneceğini düşündüğünüzde, bu öğenin sayfanın işaretlemesinde bulunduğu bağlamı anlamanız gerekir.
Özetle
Yüzdeler, duyarlı web sitelerinin yerleşimini oluştururken kritik bir rol oynar. Boyutları birbiriyle göreceli olarak gerçek bir akışkan ızgara yapmak için, duyarlı bir şekilde boyutlandırmayı veya yüzde genişliklerini kullanarak, bu hesaplamaları anlamak istediğiniz görünümü elde etmek için gerekli olacaktır.