Medya Sorgu nedir?
Medya sorgu CSS3 tanıtılan CSS tekniğidir.
Bu kullanır @media belli koşul doğruysa yalnızca CSS özellikleri bloğunu kapsayacak şekilde kuralı.
Örnek
tarayıcı penceresi 500px küçükse, arka plan rengini lightblue değişecektir:
@media only screen and (max-width: 500px) {
body {
background-color: lightblue;
}
}
Kendin dene " Bir Breakpoint Ekle
Daha önce bu eğitimde biz satırlar ve sütunlar ile bir web sayfasında yayınlanmış ve o duyarlı, ama küçük bir ekranda iyi görünmüyordu.
Medya sorguları konuda size yardımcı olabiliriz. Biz tasarımın bazı kısımları kesme her iki tarafında farklı davranır bir kesme noktası ekleyebilir.
Masaüstü
Telefon
768px bir kesme noktası eklemek için bir medya sorgusu kullanın:
Örnek
Ekran zaman (browser window) 768px daha küçük olur, her bir sütun,% 100 kadar bir genişliğe sahip 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%;
}
}
Kendin dene " Daima Mobil Birinci için tasarlayın
Mobil İlk masaüstüne veya başka bir cihaz için tasarlamadan önce mobil cihazlar için tasarım anlamına gelir (This will make the page display faster on smaller devices) .
Bu bizim CSS bazı değişiklikler yapmak gerektiği anlamına gelir.
Genişliği 768px daha büyük aldığında yerine genişliği daha küçük 768px aldığında tarzlarını değiştirmeyi biz tasarımını değişmelidir. Bu tasarımımızı Mobil İlk yapacaktır:
Ö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%;}
}
Kendin dene " Başka Kesme Noktası
İstediğiniz kadar kesme noktaları ekleyebilir.
Ayrıca tabletler ve cep telefonları arasında bir kesme noktası ekler.
Masaüstü
Tablet
Telefon
Bir daha Medya sorgusunun ekleyerek yapabilirsiniz (at 600px) ve 600px daha büyük cihazlar için yeni sınıflar kümesi (but smaller than 768px) :
Örnek
Sınıfları iki set hemen hemen aynı olduğu not, tek fark adı ( col- and col-m- ) :
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 600px) {
/* For tablets: */
.col-m-1 {width: 8.33%;}
.col-m-2 {width: 16.66%;}
.col-m-3 {width: 25%;}
.col-m-4 {width: 33.33%;}
.col-m-5 {width: 41.66%;}
.col-m-6 {width: 50%;}
.col-m-7 {width: 58.33%;}
.col-m-8 {width: 66.66%;}
.col-m-9 {width: 75%;}
.col-m-10 {width: 83.33%;}
.col-m-11 {width: 91.66%;}
.col-m-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%;}
} Kendin dene " Biz aynı sınıfların iki takım var oldukça garip gözükebilir, ama bize her kesme noktasında sütunlu ne olacağını karar vermek HTML fırsat verir:
HTML Örneği
Masaüstü için:
Birinci ve üçüncü bölüm hem 3 sütun her bir span. Orta bölüm 6 sütun span.
Tabletler için:
3 sütun span birinci bölüm, ikinci 9 span ve üçüncü bölümü, birinci iki bölüm aşağıda gösterilecektir ve 12 sütun span:
<div class="row">
<div class="col-3 col-m-3">...</div>
<div
class="col-6 col-m-9">...</div>
<div
class="col-3 col-m-12">...</div>
</div>Yön: Dikey / Yatay
Medya sorgular da tarayıcının Yöne bağlı olarak sayfanın düzenini değiştirmek için kullanılabilir.
Sen tarayıcı penceresi yüksekliği, bir sözde daha geniş olduğunda geçerli olur CSS özellikleri bir dizi var olabilir "Landscape" yönelim:
Örnek
yönü yatay modda ise web sayfası, bir Lightblue altyapıya sahip olacaktır:
@media only screen and (orientation:
landscape) {
body {
background-color: lightblue;
}
} Kendin dene "