Media Query’ler, web sayfalarının farklı çözünürlüklerdeki cihazlarda nasıl görüntüleneceğini ve davranışını kontrol etmek için kullanılır. Bu özellik sayesinde, web sayfalarının farklı boyutlu cihazlarda uygun bir şekilde görüntülenmesi sağlanır.
Responsive Web Tasarımı, Media Query’ler kullanarak farklı cihazlara yönelik uygun tasarımlar oluşturmayı hedefleyen bir tekniktir. Bu teknik, web sayfasının içeriğinin ve düzeninin, ekran boyutuna göre otomatik olarak değişmesine olanak sağlar.
Aşağıdaki kod blokları, Media Query’ler ve Responsive Web Tasarımı için bazı örnekler içermektedir:
<div class="responsive-example">
<h1>Bu bir başlık etiketidir</h1>
<img src="image.jpg" alt="resim">
<p>Bu bir paragraf etiketidir.</p>
</div>
.responsive-example {
width: 100%;
}
@media (min-width: 768px) {
.responsive-example {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
}
h1, p {
font-size: 24px;
}
img {
width: 50%;
}
}
@media (min-width: 1200px) {
h1, p {
font-size: 36px;
}
img {
width: 30%;
}
}
Yukarıdaki kod bloklarında, bir HTML etiketi belirtilmiştir. CSS stil dosyasında, .responsive-example sınıfı için genişlik ayarlandı.
Media Query’ler ile ekran boyutuna göre farklı CSS stilleri tanımlanmıştır. Örneğin, min-width özelliği ile ekrana en az 768 piksel genişlik atandığında display özelliği flex yapılacak ve flex-direction özelliği row olarak ayarlanacaktır. Ayrıca, h1 ve p etiketlerinde font-size özelliği değişirken, img etiketinin genişliği %50’den %30’a düşürülmüştür.
Ayrıca, media query’lerin yanı sıra CSS3’te farklı responsive web tasarım teknikleri de kullanılabilir. Bu tekniklerden bazıları, viewport özellikleri (viewport units), flexbox, grid layout ve CSS Framework’ler gibi araçlardır. Bu araçlar sayesinde, web sayfaları daha da dinamik hale getirilebilir ve farklı cihazlarda uygun görüntüleme sağlanabilir.
