CSS İLE RESPONSIVE SİTE TASARIMI

CSS İLE RESPONSIVE SİTE TASARIMI

Tarhi : 25-05-2017 11:57:00 | Yazar : ÇAĞLAR BOSTANCI

CSS İLE RESPONSIVE SİTE TASARIMI

Çağımızda bütün web siteleri inşa edilirken, tasarım esnasında sitenin tüm ortamlara uyunluluğunuda sağlanmak gerekmektedir. Tablet, telefon vb. gibi ekranlara uyumluluğu sağlanamadan oluşuturulan web sayfalarından bu gibi ortamlarda verim alınmamakta, kullanıcıyı hitap etmekmektedir. Tekrar böyle sayfaları responsiv (Yani her ekran boyutuna göre görüntülenebilir) hale getirmek dahada zor olmaktadır. İyi bir web sayfası tasarım aşamasında responsiv şekilde inşa edilmelidir. Peki bu nasıl olacak.

Öncelikle aşağıdaki bilgilere bir göz atalım.

Media Özelliği

Media özelliği stil direktiflerinin hingi ortamda görüntü sağlayacağını belirler. Html sayfalarını projeksiyon cihazları, cep telefonları gibi, çok değişik ortamlarda görüntülenmesi amaçlanmaktadır. Bu özelliğin varsayılan değeri screen dır. Birden falza media seçeneği için screen, print şeklinde aralarına virgül konularak belirtilebilir. Tanımlanan tiplerin içinde “all” seçeneği bütün media tiplerini kapsar.
screen : Bilgisayar Ekranı için
tv : Televizyon ortamları için
projection : Projeksiyon sunumu için
handheld : El bilgisayarı ortamı için
aural : Ses sentezi yapan ortamlar için.
all : Tüm ortamlar için.
embossed : Braille yazıcı için.CSS3 ile gelen tanımlayıcı.
tty : Teleks ortamları için. CSS3 ile gelen tanımlayıcı.
speech : Ses sentezi yapan ortamlar için. CSS3 ile gelen tanımlayıcı.

Web tarayıcılar media tanımlayıcılarının hepsini henüz desteklememektedir.Bütün web tarayıcıları screen, print, ve all seçeneklerini destekleidiği için bu seçenekler kullanılır.

Öncelikle web sayfamıza gelen bir istemcinin ortamını öğrenmek için meta viewport ayarı yapmamız gerekmektedir. İlk meta ayarı (ve en sık kullanacağımız bir) viewport özelliğidir. Mobil cihazlarda optimize edilmiş görünümü ayarlamak için aşağıdaki gibi bir tanımlama yapabiliriz. Bu kodu htmlde <head></head> etiketleri arasına yazıyoruz.

Mobil cihazların enine görünüm ayarlamak için tarayıcıya belli bir ölçek verilebilir. Aşağıdaki örnek bir web uygulaması için arzu edilen bir yakınlaştırma sağlar. Yakınlaştırmayı engellemek için user-scalable=no veya belirli bir seviye tanımlanabilir.

width piksel değeri alabilir. Örn widtt=320px olarak verilebilir. Aynı sonucu elde etmek için width=device-width yazılarak aygıtın ekran genişliğini alması sağlanabilir. Web sayfasını okuyan cihazın ekran genişliğini aldıktan sonra ise işimiz dahada kolaylaşmaktadır. Bu saaten sonra yapacağımız tek şey css dosyasında belirtilen ekran değerlerinde yapılması gerekenleri yazacağız. CSS dosyasına aşağıdaki gibi bir tanımlama yapıyoruz.

Bu tanımla eknran genişliğnin maksimum 960px olduğunda yapılması gerekenleri süslü parantezler içene yazıyoruz.

Yukarıdaki kod ekran çözünürlüğü 960px den küçük olduğu durumda sitenin bulunduğu anadiv ‘in genişliğini 100% yaparaka yani tüm ekranı kaplayarak içeriğin daha iyi bir şekilde sunulmasını sağlayacaktır. Bu şekilde tek bir ekran genişliği verildiği gibi iki ekran genişliği arasında yapılması gerekenleride sıralayabilir.
ÖRN:

Yukarıdaki tanımlama ekran çözünürlüğünün 481px ile 758px arasında ise parantez içerisindeki kodlar devreye girecek daha önce anadiv için tanımlamış olduğumuz değerlerden sadece (width:90%;) genişliğini değiştirip yüksekliğini (height:30em) 30em yacpacak ve border özelliği verecektir. Bu sayede belirlenen ekran genişliklerine göre css kodlarımızı yazabiliriz.

Bu uygulama aynı css dosyası içerisinde yapıldığı gibi dışardan da dahil edilebilmektedir. Mesela bir ekran çözünürlüğüne göre belirtilen css dosyalarını çağırmasını istiyorsak aşağıdaki gibi bir tanımlama yapmalıyız.

Yukarıdaki tanımlama ekran genişliği 319px e kadar dokunmaktiktelefon.css dosyasını çağıracaktır. Aşağıda ise belirtilen iki ekran genişliğinde çağırılacak css dosyasını belirtmektedir.

Yukarıdaki tanımlama ile 641 px ile 800px arasındaki ekran genişliklerinde ipad.css dosyasını çağıracaktır. Her iki yöntemide belirtiğimize göre şimde sadece hangi ekran çözünürlüğü hangi cihaza ait onu bilmemiz gerekmektedir.

ÖRNEK UYGULAMA:

Responsiv sitemiz için önce css dosyamızı oluşuturlarım.

dosya adı: css-son-ders.css

Sonra HTML sayfamızı oluşturalım.

Dosya adı: index.html

 

Reklam Alanı