- Arşiv
- CSS
CSS3 @media Sorguları ile Responsive Tasarım
Abdullah K. · 18 Temmuz 2020 · 1 dk okuma
Medya sorguları (responsive = duyarlı tasarım), CSS3'te tanıtılan bir CSS tekniğidir.
Belirli koşul veya koşullar doğru ise CSS özelliklerinin bir veya birden fazla bloğunu değiştirmek için @media etiketi kullanılır.
Örneğin tarayıcı penceresi 600px <= ise metin rengini yeşil yapalım. Değişikliği görmek için mobil cihazdan giriş yapınız veya tarayıcınızın boyutunu küçültünüz.
Orientation: Portrait (dikey) / Landscape (yatay)
Örnek olarak herhangi bir cihazdan sitemize giriş yapıldığında dikey ekranda metni ortalamak için aşağıdaki kodu kullanabilirsiniz:
@media only screen and (orientation: portrait) {
.text {
text-align: center;
}
}
Sadece belirli cihaz(lar)a özel @media etiket(ler)i kullanabilirsiniz. Bunun için bağlantıyı takip ediniz.
@media sorgularının detaylı listesi için tıklayınız.
Detaylı responsive örneği için bağlantı'da ki kodları inceleyebilirsiniz.