CSS Medya Sorgusu Nasıl Yazılır?

@medya ekranı ve (min-width: 1000px) { }

Bu, bir Medya Sorgusunun sözdizimidir. ile başlar @medya Medya Sorgusunun kendisini oluşturmak için. Ardından, bu durumda medya türünü ayarlayın. ekran. Bu tür masaüstü bilgisayar ekranları, tabletler, telefonlar vb. için geçerlidir. Medya Sorgusunu şununla sonlandırın: medya özelliği. Yukarıdaki örneğimizde, yani orta genişlik: 1000 piksel. Bu, Medya Sorgusunun minimum 1000 piksel genişliğe sahip ekranlar için devreye girdiği anlamına gelir.

Medya Sorgusunun bu öğelerinden sonra, herhangi bir normal CSS kuralında yapacağınıza benzer bir açılış ve kapanış küme ayracı ekleyin.

Bir Medya Sorgusunun son adımı, bu koşul karşılandıktan sonra uygulanacak CSS kurallarını eklemektir. Bu CSS kurallarını Medya Sorgusunu oluşturan küme parantezleri arasına aşağıdaki gibi ekleyin:

 @medya ekranı ve (min-width: 1000px) { body { font-size: 20px; }





instagram viewer

Medya Sorgusunun koşulları karşılandığında (tarayıcı penceresi en az 1000 piksel genişliğindedir), bu CSS stili sitemizin yazı tipi boyutunu başlangıçta belirlediğimiz 16 pikselden yeni değerimiz olan 20'ye değiştirerek yürürlüğe girer. piksel. 
 Daha Fazla Stil Ekleme 

kadar yerleştirin CSS kuralları Web sitenizin görsel görünümünü ayarlamak için gerektiğinde bu Medya Sorgusu içinde. Örneğin, yazı tipi boyutunu yalnızca 20 piksele çıkarmakla kalmayıp, tüm paragrafların rengini de siyah (#000000) olarak değiştirmek için şunu ekleyin: 
@medya ekranı ve (min-width: 1000px) {
vücut {
yazı tipi boyutu: 20 piksel;
}
p {
renk: #000000;
}
}
 Daha Fazla Medya Sorgusu Ekleme 

Ek olarak, her büyük boyut için daha fazla Medya Sorgusu ekleyerek bunları stil sayfanıza şu şekilde ekleyebilirsiniz: 
@medya ekranı ve (min-width: 1000px) {
vücut {
yazı tipi boyutu: 20 piksel;
}
p {
renk: #000000;
{
}
@medya ekranı ve (min-width: 1400px) {
vücut {
yazı tipi boyutu: 24 piksel;
}
}

İlk Medya Sorguları, yazı tipi boyutunu 20 piksele değiştirerek 1000 piksel genişliğinde başlar. Ardından, tarayıcı 1400 pikselin üzerine çıktığında yazı tipi boyutu tekrar 24 piksele değişirdi. Belirli web siteniz için gerektiği kadar Medya Sorgusu ekleyin. 
 Minimum Genişlik ve Maksimum Genişlik 

Medya Sorguları yazmanın genellikle iki yolu vardır: minimum genişlik veya ile maksimum genişlik. Şimdiye kadar, min-width'i çalışırken gördük. Bu yaklaşım, bir tarayıcı en azından bu minimum genişliğe ulaştıktan sonra Medya Sorgularını etkinleştirir. Yani kullanan bir sorgu minimum genişlik: 1000 piksel tarayıcı en az 1000 piksel genişliğinde olduğunda geçerlidir. Bu Medya Sorgusu stili, mobil öncelikli bir şekilde bir site oluştururken kullanılır. 

Eğer kullanırsan maksimum genişlik, tam tersi şekilde çalışır. Tarayıcı bu boyutun altına düştükten sonra "max-width: 1000px" Medya Sorgusu uygulanır. 

Bu Makaleyi alıntılayın.