Duyarlı Web Sayfası Tasarımı - Medya Sorgusu
- Önceki Sayfa RWD Ağ Görünümü
- Sonraki Sayfa RWD Görsel
Medya sorgusu nedir?
Medya sorgusu, CSS3'te tanıtılan bir CSS teknolojisidir.
Belirli şartlar karşılandığında kullanılır @media CSS özellik bloklarını referans etmek için kurallar.
Örnek
Tarayıcı penceresi 600px veya daha küçükse, arka plan rengi açık mavi olmalıdır:
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
Kesinti noktası ekleyin
Bu derste daha erken bir zamanda, satırlar ve sütunlar içeren bir web sayfası oluşturduk, ancak bu yanıt verici web sayfası küçük ekranlarda iyi görünmüyordu.
Medya sorgusu, tasarımın kesinti noktasının her iki tarafında farklı şekilde görüneceği bir kesinti noktası eklemenize yardımcı olur.
Masaüstü bilgisayar
Cep telefonu
768px'de kesinti noktası eklemek için medya sorgusunu kullanın:
Örnek
Ekran (tarayıcı penceresi) 768px'den küçükse, her sütunun genişliği 100％ olmalıdır:
/* Masaüstü cihazlar için: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
@media only screen and (max-width: 768px) {
/* telefonlar için: */
[class*="col-"] {
width: 100%;
}
}
Her zaman mobil öncelikli tasarım
Mobil öncelikli (Mobile First), masaüstü cihazlar veya diğer cihazlar için tasarım yapmadan önce, öncelikle mobil cihazlar için tasarım yapmayı优先 (Bu, sayfanın küçük cihazlarda daha hızlı görüntülenmesini sağlar).
Bu, CSS'te bazı iyileştirmeler yapmamız gerektiği anlamına gelir.
Genişlik 768px'den küçükse, tasarımı değiştirmeliyiz, genişliği değiştirmemeliyiz. 'Mobil öncelikli' tasarımı budur:
Örnek
/* telefonlar için: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 768px) {
/* masaüstü için: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
Bir diğer kesinti noktası
Herhangi fazla kesinti noktası ekleyebilirsiniz.
Tablet ve cep telefonu arasında bir kesinti noktası ekleyeceğiz.
Masaüstü bilgisayar
Tablet
Cep telefonu
Bu nedenle, bir medya sorgusu ekledik (600 piksel'de) ve 600 piksel'den büyük (ama 768 piksel'den küçük) cihazlar için yeni bir sınıf grubu ekledik:
Örnek
Lütfen dikkat edin, iki grup sınıf neredeyse aynı, tek fark adlar (col- ve col-s-):
/* telefonlar için: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 600px) {
/* tabletler için: */
.col-s-1 {width: 8.33%;}
.col-s-2 {width: 16.66%;}
.col-s-3 {width: 25%;}
.col-s-4 {width: 33.33%;}
.col-s-5 {width: 41.66%;}
.col-s-6 {width: 50%;}
.col-s-7 {width: 58.33%;}
.col-s-8 {width: 66.66%;}
.col-s-9 {width: 75%;}
.col-s-10 {width: 83.33%;}
.col-s-11 {width: 91.66%;}
.col-s-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
/* masaüstü için: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
İki grup benzer sınıf oldukça garip görünebilir, ancak bize her bağlantı noktasında sütunların ne olacağını belirlemek için HTML kullanma fırsatı sağlar:
HTML örneği
Masaüstü için:
İlk ve üçüncü bölümler 3 sütunu geçecek. Orta bölüm 6 sütunu geçecek.
Tabletler için:
İlk bölüm 3 sütunu geçecek, ikinci bölüm 9 sütunu geçecek, üçüncü bölüm ise ilk iki bölümün altında görünecek ve 12 sütunu geçecek:
<div class="row"> <div class="col-3 col-s-3">...</div> <div class="col-6 col-s-9">...</div> <div class="col-3 col-s-12">...</div> </div>
Tipik cihaz kesicileri
Farklı yükseklik ve genişlikteki ekranlar ve cihazlar sayısı sayısızdır, bu yüzden her cihaz için doğru kesicileri oluşturmak zor olabilir. Basitlik için bu beş gruba hedefleyebilirsiniz:
Örnek
/* Çok küçük cihazlar (telefonlar, 600px ve altı) */
@media only screen and (max-width: 600px) {...}
/* Küçük cihazlar (dikey tabletler ve büyük telefonlar, 600 piksel ve üzeri) */
@media only screen and (min-width: 600px) {...}
/* Orta ölçekli cihazlar (yatay tabletler, 768 piksel ve üzeri) */
@media only screen and (min-width: 768px) {...}
/* Büyük cihazlar (dizüstü bilgisayarlar/masaüstü bilgisayarlar, 992px ve üzeri) */
@media only screen and (min-width: 992px) {...}
/* Çok büyük cihazlar (büyük dizüstü bilgisayarlar ve masaüstü bilgisayarlar, 1200px ve üzeri) */
@media only screen and (min-width: 1200px) {...}
Yön: Portre / Manzara
Medya sorgusu, sayfanın düzenini tarayıcının yönüne göre değiştirmek için de kullanılabilir.
Yalnızca tarayıcı penceresi genişliği yüksekliğinden büyükse geçerli olan bir grup CSS özelliği ayarlayabilirsiniz, yani 'yatay' yönü:
Örnek
Eğer yön geniş ekran modu (landscape mode) ise, web sayfası arka planı açık mavi olur:
@media only screen and (orientation: landscape) {
body {
background-color: lightblue;
}
}
Medya sorgusu ile ögeyi gizleme
Medya sorgusunun bir diğer yaygın kullanımı, farklı ekran boyutlarında öğeleri gizlemektir:
Örnek
/* Ekrar boyutu 600 piksel veya daha küçükse, bu ögeyi gizleyin */
@media only screen and (max-width: 600px) {
div.example {
display: none;
}
}
Medya sorgusu ile font boyutunu değiştirme
Ayrıca, farklı ekran boyutlarında öğelerin font boyutunu değiştirmek için medya sorgusunu kullanabilirsiniz:
Örnek
/* Ekrar boyutu 601px veya daha büyükse, <div> font-size'ını 80px olarak ayarlayın */
@media only screen and (min-width: 601px) {}}
div.example {
font-size: 80px;
}
}
/* Eğer ekran boyutu 600px veya daha küçükse, <div> font-size'ını 30px olarak ayarlayın */
@media only screen and (max-width: 600px) {
div.example {
font-size: 30px;
}
}
CSS @media Referans Kılavuzu
Tüm medya türleri ve özellikleri/ifadelerle ilgili tam bir genel bakış için CSS Referans Kılavuzunda @media Kuralları İçin Bakın.
- Önceki Sayfa RWD Ağ Görünümü
- Sonraki Sayfa RWD Görsel
