Duyarlı web tasarımı, bu sayfaların düzenini ve görünümünü bir ziyaretçinin ekran boyutuna göre dinamik olarak değiştirebileceği web sayfaları oluşturmaya yönelik bir yaklaşımdır. Büyük ekranlar, bu daha büyük ekranlara uygun bir düzen alırken, cep telefonları gibi daha küçük cihazlar, aynı web sitesini bu küçük ekrana uygun bir şekilde biçimlendirilmiş olarak alır. Bu yaklaşım, tüm kullanıcılar için daha iyi bir kullanıcı deneyimi sağlar ve hatta arama motoru sıralamalarını iyileştirmeye yardımcı olabilir. CSS Medya Sorguları duyarlı web tasarımının önemli bir parçasını oluşturmaktadır. Medya Sorguları, web sitenizin CSS dosyasındaki küçük koşullu ifadeler gibidir ve yalnızca belirli bir koşul karşılandığında geçerli olacak belirli CSS kuralları belirlemenize olanak tanır; örneğin, bir ekran boyutu belirli eşiklerin üstünde veya altında olduğunda. Medya Sorguları artık standarttır, ancak Internet Explorer’ın çok eski sürümleri bunları desteklememektedir.
Eylemdeki Medya Sorguları
Herhangi bir görsel stil içermeyen iyi yapılandırılmış bir HTML belgesiyle başlayın. CSS dosyanızda sayfaya stil verin ve web sitesinin nasıl görüneceğine dair bir temel belirleyin. Sayfanın yazı tipi boyutunu 16 piksel yapmak için şu CSS’yi yazın: body { font-size: 16px; } Bunu yapmak için yeterli alana sahip daha büyük ekranlar için yazı tipi boyutunu artırmak için, şöyle bir Medya Sorgusu başlatın: @media screen ve (min-width: 1000px) { } Bu, 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 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ış kaşlı 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 şunun gibi ekleyin: @media screen ve (min-width: 1000px) { body { font-size: 20px; } Medya Sorgusunun koşulları karşılandığında (tarayıcı penceresi en az 1000 piksel genişliğindedir), bu CSS stili etkinleşir ve sitemizin orijinal olarak belirlediğimiz 16 piksel olan yazı tipi boyutunu yeni 20 piksel değerine değiştirir.
Daha Fazla Stil Ekleme
Web sitenizin görsel görünümünü ayarlamak için bu Medya Sorgusuna gerektiği kadar CSS kuralı yerleştirin. Örneğin, yazı tipi boyutunu yalnızca 20 piksele çıkarmakla kalmayıp, aynı zamanda tüm paragrafların rengini siyah (#000000) olarak değiştirmek için şunu ekleyin: @media screen 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: @media screen 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.
mla apa chicago Alıntınızı Biçimlendirin
Girard, Jeremy. “CSS Medya Sorgusu Nasıl Yazılır?” Düşünce Şirketi, Mayıs. 14, 2021, thinkco.com/how-do-you-write-css-media-queries-3469990.
Girard, Jeremy. (2021, 14 Mayıs). CSS Medya Sorgusu Nasıl Yazılır? https://www.thinktco.com/how-do-you-write-css-media-queries-3469990 adresinden alındı
Girard, Jeremy. “CSS Medya Sorgusu Nasıl Yazılır?” Düşünce Şirketi https://www.thinktco.com/how-do-you-write-css-media-queries-3469990 (4 Haziran 2021’de erişildi).
