Embedded Files
HAZIRLAYAN : SİMGE GÜNDOĞDU
CSS İLE ESNEK (RESPONSIVE) TASARIMI
Çağımızda bütün web siteleri inşa edilirken, tasarım esnasında sitenin tüm ortamlara uyunluluğunu da 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ı responsive (Yani her ekran boyutuna göre görüntülenebilir) hale getirmek daha da zor olmaktadır. İyi bir web sayfası tasarım aşamasında responsive şekilde inşa edilmelidir. Peki bu nasıl olacak.
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.
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
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.
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5 maxmum-scale=1.0" />
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.
@media only screen and (max-width: 960px) { }
Bu tanımla eknran genişliğnin maksimum 960px olduğunda yapılması gerekenleri süslü parantezler içene yazıyoruz.
@media only screen and (max-width: 960px) {
#anadiv{ width:100%; height:10em; border:none;}
}
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.
@media only screen and (min-width: 480px) and (max-width: 759px) {
#anadiv{ width:90%; height:30em; border:1px solid #000;}
}
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.
<link rel="stylesheet" madia="handheld, only screen and (max-device-width:320px)" href="dokumatiktelefon.css" />
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.belirtmektedir.
<link rel="stylesheet" madia="only screen and (min-width:641px and (max-width:800px)" href="ipad.css" />
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 şimdi sadece hangi ekran çözünürlüğü hangi cihaza ait onu bilmemiz gerekmektedir.
CSS
@media only screen and (min-width:990px) and (max-width:1230px) {
/*BU TANIMLAMA MASA ÜSTÜ BİLGİSAYARLAR İÇİN GEÇERLİDİR*/
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
/*BU TANIMLAMA TABLETLER İÇİN GEÇERLİDİR*/
}
@media only screen and (max-width: 479px) {
/*BU TANIMLAMA TELEFONLAR İÇİN GEÇERLİDİR*/
}
1
Page updated
Report abuse