CSS Konuları
CSS Media Query & Responsive Tasarım
Web üzerinde trafik yoğunluğunun %90’ı mobilden geliyor. Bu yüzden tasarlanan web sitelerinin mobil kullanıma uygun bir şekilde responsive tasarıma sahip olması gerekiyor, bu konuda CSS media query yapısı büyük rol oynuyor.
Büyük ekranlardaki içeriği küçük ekranda uygun olarak göstermek için veya farklı ekran boyutlarında sayfa içeriğini taşma, kayma yapmaması için medya sorgu yapısı kullanılıyor. Web siteleri kodlanırken farklı mobil ekran ölçülerine göre responsive CSS kodları ile optimize hale getiriliyor.
Media query ile spesifik ekran genişliklerinde HTML elemanlarına CSS kodları uygulanabiliyor.
Örnek olarak bir sayfa içerisinde <p> etiketleri 17 piksel iken, 600 piksel altındaki ekranlarda oranı korumak için <p> etiketinin font büyüklüğü 14 piksel olarak belirlenebiliyor.
Min-width Media Query
Min-width kullanıldığında medya sorgusunun altına yazılan CSS kodları belirtilmiş olan piksel değerinin üzeri için geçerli olur.
Aşağıdaki örnekte olduğu gibi en fazla 751 piksele kadar p etiketinin font büyüklüğü 17 piksel olarak belirtilmiştir.
@media (min-width: 751px) {
p {
font-size: 17px;
}
}Max-width Media Query
Max-width kullanıldığında, medya sorgusunun altına yazılan CSS kodları belirtilmiş olan piksel değerinin altı için geçerli olur.
Aşağıdaki örnekte olduğu gibi en fazla 750 piksele kadar p etiketinin font büyüklüğü 14 piksel olarak belirtilmiştir.
@media (max-width: 750px) {
p {
font-size: 14px;
}
}Orientation: Landscape
Orientation: landscape kullanımında medya sorgusunun altına yazılan CSS kodları mobil cihazlar yatay konuma getirildiğinde geçerli olur.
Aşağıdaki örnekte mobil cihaz yatay konuma geldiğinde kutunun rengini değiştirecek CSS kodu belirtilmiştir.
Dikey Konum
Yatay Konum
div {
height: 100px;
width: 100px;
background-color: bisque;
}
@media (orientation: landscape) {
div {
background-color: brown;
}
}Orientation: Portrait
Orientation: portrait kullanımında medya sorgusunun altına yazılan CSS kodları mobil cihazlar dikey konumda iken geçerli olur.
Dikey Konum
Yatay Konum
h1 {
font-weight: 100;
}
@media (orientation: portrait) {
h1 {
font-weight: bold;
}
}Eski Tarayıcılarla Uyumluluk
Medya sorgusunda kullanılan only kavramı eski tarayıcılarda geçerliliği olmayan medya sorgularının uygulanmasını engeller. Yeni tarayıcılarda herhangi bir etki oluşturmaz.
@media only screen and (max-width: 750px) {...}Media Query & Viewport İlişkisi
Media query yapısının çalışabilmesi için sayfanın kaynak koduna <head></head> etiketinin içerisine viewport meta etiketinin eklenmesi gerekiyor.
<meta name="viewport" content="width=device-width, initial-scale=1">
Kaynakça:
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries