- Katılım
- 28 Mayıs 2013
- Mesajlar
- 190
- Reaction score
- 1
CSS2, farklı ekran çözünürlükleri için farklı stylesheet atamamızı sağlıyordu. CSS3 ise media sorgulamaları sayesinde tüm bu işlemleri tek dosyada yapmamızı sağlıyor.
CSS3 media sorgulamaları sayesinde her tip ekran çözünürlüğü için tasarımlar oluşturabiliyoruz. Özellikle sayfalarınıza mobil sürüm hazırlarken kullanabileceğiniz media etiketi web tasarımınıda yeni bir devrin başlamasına sebep oldu.
Makalemizin devamında media sorgularını örneklendireceğiz, tanıyacağız ve bu teknik ile hazırlanmış birkaç web sayfası paylaşacağız.
CSS3 Medya Sorguları
Öncelikle sizler için hazırladığımız örneği görüntüleyerek işleme başlayabilirsiniz.
Örnekteki şekil
Max Width
Bu alandaki CSS kodları maksimum x ekran çözünürlüğüne göre kullanılır. Aşağıdaki tanımlama 900 pikselden küçük ekran genişliklerinde bütün yazıları kırmızı renge dönüştürür.
Eğer bütün bir CSS dosyasına bu tanımlamayı yapmak isterseniz <head></head> içerisine yazdığımız köprü kodunu aşağıdaki kullanmalısınız.
Min Width
Bu alandaki CSS kodları ise x rakamından büyük ekran çözünürlüklerinde kullanılır. Aşağıdaki tanımlama 900 pikselden büyük ekran genişliklerinde bütün yazıları mevi renge dönüşürür.
Eğer bütün bir CSS dosyasına bu tanımlamayı yapmak isterseniz <head></head> içerisine yazdığımız köprü kodunu aşağıdaki kullanmalısınız.
Çoklu media sorgulaması
Çoklu media sorgulamalarını aralıklar için tasarım oluştururken kullanıyoruz. Örnek vermek gerekirse :
Aşağıdaki sorgu 900 ile 1200 piksel arasındaki çözünürlüklerde site arka planını yeşil yapacaktır.
max-device-width ve max-device-height kullanımları
CSS3′ün media sorgulamaları sırasında aklınızda oluşabilecek en büyük soru max-device-width ile max-width arasındaki farkın ne olduğudur. Device kullanımı tahmin edebileceğiniz gibi mobil cihazlara odaklıdır.
Örnek
Sitemizin tasarımı üzerinde hala değişiklikler olmaktadır. Fakat varsayılan haliyle bile CSS3′ün media sorgularına güzel bir örnek teşkil etmektedir.
CSS3 media sorgulamalarını etkili şekilde kullanan Smashing Magazineini unutmamak gerek.
Kaynak : http://www.adobewordpress.com/css3-media
CSS3 media sorgulamaları sayesinde her tip ekran çözünürlüğü için tasarımlar oluşturabiliyoruz. Özellikle sayfalarınıza mobil sürüm hazırlarken kullanabileceğiniz media etiketi web tasarımınıda yeni bir devrin başlamasına sebep oldu.
Makalemizin devamında media sorgularını örneklendireceğiz, tanıyacağız ve bu teknik ile hazırlanmış birkaç web sayfası paylaşacağız.
CSS3 Medya Sorguları
Öncelikle sizler için hazırladığımız örneği görüntüleyerek işleme başlayabilirsiniz.
Örnekteki şekil
- 600′den küçük ekran genişliğinde üçgene,
- 600 ile 1200 arası ekran genişliğinde kareye,
- 1200′den büyük ekran genişliğinde daireye
Max Width
Bu alandaki CSS kodları maksimum x ekran çözünürlüğüne göre kullanılır. Aşağıdaki tanımlama 900 pikselden küçük ekran genişliklerinde bütün yazıları kırmızı renge dönüştürür.
HTML:
@media screen and (max-width: 900px) {
body{color:red;}
}Eğer bütün bir CSS dosyasına bu tanımlamayı yapmak isterseniz <head></head> içerisine yazdığımız köprü kodunu aşağıdaki kullanmalısınız.
HTML:
<link rel="stylesheet" media="screen and (max-width: 900px)" href="style.css" />Min Width
Bu alandaki CSS kodları ise x rakamından büyük ekran çözünürlüklerinde kullanılır. Aşağıdaki tanımlama 900 pikselden büyük ekran genişliklerinde bütün yazıları mevi renge dönüşürür.
HTML:
@media screen and (min-width: 900px) {
body{color:blue;}
}Eğer bütün bir CSS dosyasına bu tanımlamayı yapmak isterseniz <head></head> içerisine yazdığımız köprü kodunu aşağıdaki kullanmalısınız.
HTML:
<link rel="stylesheet" media="screen and (min-width: 900px)" href="style.css" />Çoklu media sorgulaması
Çoklu media sorgulamalarını aralıklar için tasarım oluştururken kullanıyoruz. Örnek vermek gerekirse :
Aşağıdaki sorgu 900 ile 1200 piksel arasındaki çözünürlüklerde site arka planını yeşil yapacaktır.
HTML:
@media screen and (min-width: 900px) and (max-width: 1200px) {
body {background: green;}
}max-device-width ve max-device-height kullanımları
CSS3′ün media sorgulamaları sırasında aklınızda oluşabilecek en büyük soru max-device-width ile max-width arasındaki farkın ne olduğudur. Device kullanımı tahmin edebileceğiniz gibi mobil cihazlara odaklıdır.
- max-width görüntüleyici cihazın kullandığı tarayıcının ekran genişliğidir. Tablet kullanımlarında Chrome ile sitenizi görüntüleyen ziyaretçi, eğer Chromeun genişliğini daraltırsa bu tanımladan etkilenir.
- max-device-width ise tarayı boyutlandırması değil, tasarımı görüntüleyen cihazın maksimum ekran genişliğine göre hareket eder. Örneğin max-device-width:480 tanımlaması iPhone görüntü tipidir.
Örnek
Sitemizin tasarımı üzerinde hala değişiklikler olmaktadır. Fakat varsayılan haliyle bile CSS3′ün media sorgularına güzel bir örnek teşkil etmektedir.
CSS3 media sorgulamalarını etkili şekilde kullanan Smashing Magazineini unutmamak gerek.
Kaynak : http://www.adobewordpress.com/css3-media