Media Query'in iki şekilde kullanımı aşağıdaki gibidir :
Media Query'de kullanılan mantıksal operatörler aşağıdaki gibidir :
Media query'de sorgulanabilir özellikler aşağıdaki gibidir :
İki div'den oluşan bölüm belirli bir genişlik boyunca yan yana görülecek, belirli bir genişliğin altına düşüldüğünde sağdaki ikinci bölüm birinci bölümün altında görülecektir. Daha da küçültüldüğünde ikinci bölümün gizlenmesi sağlanmatadır. Örnek web sayfasının kodu aşağıdaki gibidir :
<html> <head> <style> .LeftDiv{ width: 60%; float: left; background: #00ffff; border: solid 1px #ff0000; } .RightDiv { width: 35%; float: right; background: #ffff00; border: solid 1px #00ff00; } @media screen and (max-width: 900px) { .LeftDiv { width: 65%; } .RightDiv { width: 30%; } } @media screen and (max-width: 700px) { .LeftDiv { width: auto; float: none; } .RightDiv { width: auto; float: none; } } @media screen and (max-width: 480px) { .RightDiv { display: none; } } </style> </head> <body> <div class="LeftDiv"> Sol Bölüm<br/> Sol Bölüm<br/> Sol Bölüm<br/> Sol Bölüm<br/> Sol Bölüm<br/> Sol Bölüm<br/> Sol Bölüm<br/> Sol Bölüm<br/> Sol Bölüm<br/> Sol Bölüm<br/> Sol Bölüm<br/> Sol Bölüm<br/> Sol Bölüm<br/> Sol Bölüm<br/> </div> <div class="RightDiv"> Sağ Bölüm<br/> Sağ Bölüm<br/> Sağ Bölüm<br/> </div> </body> </html>
Üç tane media query tanımlanmıştır. Genişlik 900px , 700px ve 480px. Genişlik bu boyutlarda olduğun nasıl davranılacağı stillerden görülebilmektedir. Örneğin en fazla 480px olduğu zaman sağ div gizlenmektedir. Aşağıda ekran görüntülerini görebilirsiniz :
En büyük genişlik :
Orta genişlik :
En küçük genişlik:
