Bu dersimizde css3 ün
@media elemanını işliyeceğiz.Media günümüzde artık bir çok sitede kullanılmaya başlayan güzel bir eleman.
Medianın işlevine geçelim.Günümüzde tablet ve akıllı telefonların sayısı oldukça arttı.O yüzde 960px genişliği geçmeyen tasarımlar popülerliğini yitiriyor.Yani tabletten de girsek 960px bilgisayardan da.
Media ile yapılmış responsive tasarımlar çıkıyor.Yani
pencere boyutu değiştikçe şekillenen tasarımlar. Peki bunu nasıl yaparız derseniz.
Sitemizi normal olarak tasarlıyoruz.Ardından @media ile pencere boyutu şundan büyükse şu şeklin tasarımı şu olsun diyoruz.Bu işimizi biraz uzatabiliyor ama tüm araçlardan girildiğinde bizim ona göre belirlediğimiz tasarımlar çıkıyor.Şimdi kodlara geçelim.
@media screen and (min-width:900px) {
.logo{width:100px;}
}
Yukarıda ne yaptık.Dedik ki pencerenin boyutu 900px büyükse logonun yeni genişliği 100 px olsun.
@media screen and (max-width:900px) {
.logo{width:50px;}
}
Burada ne yaptık derseniz.Pencere boyutu 900px ten küçükse logonun yeni genişliği 50 px olsun dedik.
@media screen and (min-width:500px) and (max-width:600px) {
.logo{width:25px;}
}
Burada ne yaptık.Pencere genişliği 500pxten büyük ve 600px den küçükse logonun genişliği 25px olsun dedik.
Bu şekilde tablet-akıllı telefon ve pc genişliklerini belirleyip.Ona göre tasarımları ayarlayıp gösterebiliriz.
Genel örnek :
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>UstaDerslik</title>
<style type="text/css">
.kutu{width:100px;height:40px;background:#ddd;color:#000;margin:15px;padding:30px;}
@media screen and (min-width:900px) {
#a1{color:#fff;background:#000;}
}
@media screen and (min-width:600px) and (max-width:900px),screen and (min-device-width:600px) and (max-device-width:900px) {
#a2{color:#fff;background:#000;}
}
@media screen and (min-width:500px) and (max-width:600px),screen and (min-device-width:500px) and (max-device-width:600px) {
#a3{color:#fff;background:#000;}
}
@media screen and (max-width:500px),screen and (max-device-width:500px) {
#a4{color:#fff;background:#000;}
}
</style>
</head>
<body>
<div class="kutu" id="a1">900px üstü ise</div>
<div class="kutu" id="a2">600px-900px arası</div>
<div class="kutu" id="a3">500px-600px arası</div>
<div class="kutu" id="a4">500px altı</div>
</body>
</html>
Görüntüsü :
Yukarıdaki örnekte pencere boyutları ile oynarsanız kutuların rengi değişecektir.Çünkü @media ile belirlediğimiz genişliklere göre renklerini değiştirdik.Şimdi asıl alana geçelim.Yukarıda
@media screen and (min-width:900px) {
#a1{color:#fff;background:#000;}
}
diyerek pencere oynarsaya eriştik.Direk etkilemesi içine ne yapcaz derseniz
device ekleyeceğiz.Örneğin :
@media screen and (min-device-width:900px) {
#a1{color:#fff;background:#000;}
}
gibi yapmalıyız.Bu şekilde direk mobili algılayıp komutları çalıştıracaktır.Her 2 yöntemi birlikte kullanmak en iyisidir.Şu şekilde birlikte kullanıyoruz.
@media screen and (max-width:900px),screen and (max-device-width:900px) {
#a1{color:#fff;background:#000;}
}
Aşağıdaki örneği mobil cihazlarınızla girip deniyebilirsiniz.
İncele : http://ustaderslik.com/ornek/media.html
UstaDerslik
