Yazılım Örnekleri

css media kodu,  farklı medya türlerinde ve istediğiniz ekran boyutlarında web sitenizin nasıl görüneceğini ayrı ayrı ayarlamanızı sağlar. 
  
all - Tüm çıktı türlerinde geçerlidir
print - Yazıcıdan sonuç alınacağında  
screen - Bilgisayar ekranında 
tv - Televizyonda 

@media screen and (max-width: 480px) - farklı boyutlarda kullanırken

@media screen and (min-width: 480px) şeklindeki kullanımı özellikle responsive sitelerde sıkça kullanırız. Mobil uyumlu siteler ve tabletlerde kullanıcıya daha kaliteli bir site sunumu yapmamızı sağlar.
 
Örneğin normal ekranda arkaplan rengi kırmızı olan divimizi, 720px den küçük ekranlarda sarı yapalım.

@media screen and (max-width: 720px) şeklnde kullancağız yani ekran 720 px den aşağı düştügünde divimizin arka planı sarı olacak

   
<style>
.ornek_div { width:500px; padding:10px 20px 10px 20px; color:#FFF; font-size:16px; background:red;}
 

@media screen and (max-width: 720px)
   {
    .ornek_div { background:yellow;  }
   }
</style>

<div class="ornek_div">Bu divimizin arka planı yazıcı ortamında  sarı oalcaktır.</div>

Aşağıdaki örneğimizi ekranı 720px den küçük hale getirerek görebilirsiniz.