Duyarlı Web Tasarımı - Medya Sorguları
Medya Sorgusu nedir?
Medya sorgusu, CSS3'te tanıtılan bir CSS tekniğidir.
@mediaYalnızca belirli bir koşul doğruysa, bir CSS özellikleri bloğu eklemek için kuralı kullanır .
Örnek
Tarayıcı penceresi 600 piksel veya daha küçükse, arka plan rengi açık mavi olacaktır:
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
Kesme Noktası Ekle
Bu eğitimde daha önce satırlar ve sütunlar içeren bir web sayfası yaptık ve bu sayfa yanıt veriyordu, ancak küçük bir ekranda iyi görünmüyordu.
Medya sorguları bu konuda yardımcı olabilir. Tasarımın belirli bölümlerinin kesme noktasının her iki tarafında farklı davranacağı bir kesme noktası ekleyebiliriz.
masaüstü
Telefon
768 pikselde bir kesme noktası eklemek için bir medya sorgusu kullanın:
Örnek
Ekran (tarayıcı penceresi) 768 pikselden küçüldüğünde, her sütunun genişliği %100 olmalıdır:
/* For desktop: */
.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) {
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
}
Her Zaman Önce Mobil İçin Tasarlayın
Önce Mobil, masaüstü veya başka bir cihaz için tasarlamadan önce mobil için tasarlamak anlamına gelir (Bu, sayfanın daha küçük cihazlarda daha hızlı görüntülenmesini sağlar).
Bu, CSS'mizde bazı değişiklikler yapmamız gerektiği anlamına gelir.
Genişlik 768px'den küçük olduğunda stilleri değiştirmek yerine, genişlik 768px'den büyük olduğunda tasarımı değiştirmeliyiz. Bu, tasarımımızı Önce Mobil yapacak:
Örnek
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width:
768px) {
/* For desktop: */
.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%;}
}
Başka bir Kırılma Noktası
İstediğiniz kadar kesme noktası ekleyebilirsiniz.
Ayrıca tabletler ve cep telefonları arasına bir kesme noktası ekleyeceğiz.
masaüstü
Tablet
Telefon
Bunu, bir medya sorgusu (600 pikselde) ve 600 pikselden büyük (ancak 768 pikselden küçük) cihazlar için bir dizi yeni sınıf ekleyerek yapıyoruz:
Örnek
İki sınıf kümesinin hemen hemen aynı olduğuna dikkat edin, tek fark addır ( col-ve col-s-):
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 600px) {
/* For tablets: */
.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) {
/* For desktop: */
.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 özdeş sınıfımız olması tuhaf görünebilir, ancak bu bize HTML'de her kesme noktasında sütunlara ne olacağına karar verme fırsatı verir:
HTML Örneği
Masaüstü için:
Birinci ve üçüncü bölümün her ikisi de 3 sütuna yayılacaktır. Orta bölüm 6 sütuna yayılacaktır.
Tabletler için:
İlk bölüm 3 sütuna, ikincisi 9 sütuna, üçüncü bölüm ise ilk iki bölümün altında görüntülenecek ve 12 sütuna yayılacaktır:
<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 Kesme Noktaları
Farklı yükseklik ve genişliklere sahip tonlarca ekran ve cihaz var, bu nedenle her cihaz için kesin bir kesme noktası oluşturmak zor. İşleri basit tutmak için beş grubu hedefleyebilirsiniz:
Örnek
/*
Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px)
{...}
/* Small devices (portrait tablets and large phones, 600px and up)
*/
@media only screen and (min-width: 600px) {...}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}
/* Large devices (laptops/desktops, 992px and up)
*/
@media only screen and (min-width: 992px) {...}
/* Extra large devices (large
laptops and desktops,
1200px and up) */
@media only screen and (min-width: 1200px) {...}
Oryantasyon: Dikey / Manzara
Medya sorguları, tarayıcının yönüne bağlı olarak bir sayfanın düzenini değiştirmek için de kullanılabilir.
Yalnızca tarayıcı penceresi yüksekliğinden daha geniş olduğunda uygulanacak bir dizi CSS özelliğine sahip olabilirsiniz, buna "Yatay" yönlendirme denir:
Örnek
Yönlendirme yatay moddaysa, web sayfası açık mavi bir arka plana sahip olacaktır:
@media only screen and (orientation:
landscape) {
body {
background-color: lightblue;
}
}
Medya Sorgularıyla Öğeleri Gizle
Medya sorgularının diğer bir yaygın kullanımı, farklı ekran boyutlarındaki öğeleri gizlemektir:
Örnek
/* If the screen size is 600px wide or less, hide the element */
@media
only screen and (max-width: 600px) {
div.example {
display: none;
}
}
Medya Sorgularıyla Yazı Tipi Boyutunu Değiştirin
Farklı ekran boyutlarında bir öğenin yazı tipi boyutunu değiştirmek için medya sorgularını da kullanabilirsiniz:
Değişken Yazı Tipi Boyutu.
Örnek
/* If the screen size is 601px or
more, set the font-size of <div> to 80px */
@media only screen and (min-width:
601px) {
div.example {
font-size: 80px;
}
}
/* If the screen size is 600px or
less,
set the font-size of <div> to 30px */
@media only screen and (max-width: 600px) {
div.example {
font-size: 30px;
}
}
CSS @medya Referansı
Tüm medya türleri ve özellikleri/ifadeleri hakkında tam bir genel bakış için lütfen CSS referansımızdaki @media kuralına bakın .