Bu gönderide medya sorgularını uygulamak için gerekli yönergelerden bahsedilecektir.
Mobil Cihazlar İçin Medya Sorguları Nasıl Uygulanır?
Medya sorgusu mobil cihazlara basitçe ' @medya ” etiketi ve küçük parantez içinde ekran boyutunun belirtilmesi. Bu medya sorgusunun CSS'si daha sonra küme parantezlerinin içine eklenebilir. Ekran boyutu kullanıcı tarafından belirlenen boyuta ulaştığında belirtilen medya sorgusu uygulanacaktır.
Mobil cihazlar için medya sorgularının uygulanmasını öğrenmek için pratik bir örneğe göz atalım.
Örnek: Medya Sorguları Uygulayarak İki Sütunlu Düzenden Tek Sütunlu Düzene Değişen Bir Düzen Oluşturma
Aşağıdaki örnekte, web sayfasının düzeni sütun düzeninden tek sütun düzenine değişecektir:
Adım 1: Bir HTML Yapısı Oluşturun
- Öncelikle bir HTML dosyası oluşturun ve harici CSS stil sayfası dosyasını kendi içine bağlayın.
bölüm. - Ardından, bir
bölümünü kullanın ve web sitesinin başlığını kullanarak ekleyin. etiket. - Oluşturmak sınıf adı “container-class” ve içinde iki tane dahaile “sınıf adı var” kolon ”. < vücut >
< sa1 > Linux İpucu < / sa1 >
< / başlık>
< div sınıf = 'konteyner sınıfı' >
< div sınıf = 'kolon' >
< h2 > Birinci bölüm < / h2 >
< P > Linux Hint en iyi e-öğrenme platformlarından biridir. < / P >
< / div >
< div sınıf = 'kolon' >
< h2 > İkinci Bölüm < / h2 >
< P > Linux Hint en iyi e-öğrenme platformlarından biridir. < / P >
< / div >
< / div >
< / vücut >2. Adım: CSS'yi uygulayın
Gövde bölümünde:- Öncelikle gövde kısmını “” yazarak belirtin. vücut ” etiketi ve küme parantezlerinden bahsediliyor.
- Parantezlerin içinde yazı tipi ailesini, arka plan rengini, kenar boşluğunu ve dolguyu belirtin.
Üzerinde
bölüm:
- Metin rengini, metin hizalamasını, arka plan rengini ve dolguyu belirtin.
Üzerinde “konteyner sınıfı” div:
- Yı kur ' görüntülemek ” özellik değerini “ esnek Flexbox'ı oluşturmak için.
- Kullan ' haklı içerik ” içerik arasına boşluk eklemek ve dolgu eklemek için.
Sütun sınıfında:
- Öncelikle belirtilen değeri “ esnek İki düzen bölümü arasına boşluk eklemek için ” özelliği.
- Bundan sonra arka plan rengini, kenarlığı, dolguyu ve kutu boyutunu ekleyin.
3. Adım: Medya Sorgusunu Uygulayın
- Medya sorgusunu mobil cihazlara uygulamak için öncelikle “ @medya ' etiket.
- Ardından 'değerini belirtin' 768 piksel ” mobil cihazlar için tipik olan “ maksimum genişlik ” özelliği küçük parantezlerin içindedir.
- Bundan sonra, “ kolon 'değerinin' değerine esnek yön ' için geçerli olacak özellik' konteyner sınıfı” sınıfı. Bu, belirtilen ekran boyutu algılandığında iki sütunu tek bir sütuna dönüştürecektir.
- Son olarak “” üzerine CSS uygulayın. kolon ” sınıfı ve belirtin” marj ' Ve ' esnek ” değerleri:
yazı tipi ailesi: sans-serif;
arka plan- renk : gümüş;
marj: 0 ;
dolgu malzemesi: 0 ;
}
başlık {
arka plan- renk : #2f4f4f;
dolgu: 20 piksel;
metin- hizalamak : merkez;
renk : beyaz;
}
.konteyner- sınıf {
ekran: esnek;
savunmak- içerik : arasındaki boşluk;
dolgu: 20 piksel;
}
.kolon {
esnek: 0 1 hesap ( elli % - 10 piksel ) ;
sınır : 1px düz yeşil;
arka plan- renk : beyaz;
kutu boyutlandırma: kenarlık kutusu;
dolgu: 20 piksel;
}
@ medya ( maksimum Genişlik : 768 piksel ) {
.konteyner- sınıf {
esnek yön: sütun;
}
.kolon {
esnek: 0 1 100 %;
kenar boşluğu alt: 20 piksel;
}
}Çıktı
İşte medya sorgusu uygulandıktan sonra web sayfasının çıktısı. Bu çıktı iki sütunlu duyarlı bir düzendir:
Ekran, mobil cihazlara yönelik bir medya sorgusu kullanılarak belirtilen boyutları karşıladığında tek sütunlu bir düzene dönüşür:
Çözüm
Mobil cihazlara yönelik medya sorgularını uygulamak için öncelikle ' görünüm alanı ' içinde ' KAFA ' bölüm. Daha sonra mobil tasarıma özel CSS yazın. Daha sonra “@media” etiketini kullanarak mobil ekran boyutunu belirterek medya sorgusunu ekleyin. Örneğin tabletler için 768 piksel, cep telefonları için 480 piksel belirtin. Bu makalede, mobil cihazlar için medya sorgularını uygulamaya yönelik prosedür açıklanmıştır.