Hem mini genişlik hem de maksimum genişlikli medya sorguları için sözdizimi
Duyarlı web tasarımı , bu sayfaların bir ziyaretçinin ekran boyutuna göre düzenini ve görünümünü dinamik olarak değiştirebildiği web sayfalarının oluşturulmasına yönelik bir yaklaşımdır. Büyük ekranlar, daha büyük ekranlara uygun bir düzen alabilirken, cep telefonları gibi daha küçük cihazlar, aynı web sitesini bu küçük ekran için uygun bir şekilde biçimlendirebilir. 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. Duyarlı web tasarımının önemli bir parçası CSS Medya Sorgularıdır.
Medya Sorguları, web sitenizin CSS dosyasında bulunan bazı koşullu ifadeler gibidir; belirli bir koşul yerine getirildiğinde belirli bir CSS kuralını ayarlamanıza izin verir - ekran boyutu belirli eşiklerin altında veya üstünde olduğunda benzerdir.
Medya Sorguları Eylemde
Peki bir web sitesinde Medya Sorgularını nasıl kullanıyorsunuz? İşte çok basit bir örnek:
- Herhangi bir görsel stil içermeyen iyi yapılandırılmış bir HTML belgesiyle başlayacaksınız (CSS'nin ne için olduğu)
- CSS dosyanızda, sayfayı şekillendirerek ve web sitesinin nasıl görüneceğine ilişkin bir temel belirleyerek normalde yaptığınız gibi başlayacaksınız. Sayfanın yazı tipi boyutunu 16 piksel olarak istediğinizi varsayalım, bu CSS'yi yazabilirsiniz: body {font-size: 16px; }
- Şimdi, bunu yapmak için yeterli gayrimenkulleri olan daha büyük ekranlar için yazı tipi boyutunu artırmak isteyebilirsiniz. Bu, Medya Sorgularının başladığı yer. Bu şekilde bir Medya Sorgusu başlatacaksınız: @media ekranı ve (min. Genişlik: 1000 piksel) {}
- Bu bir Medya Sorgusunun sözdizimi. Medya Sorgu'nun kendisini kurmak için @media ile başlar. Daha sonra, bu durumda "ekran" olan "ortam tipi" ni ayarlarsınız. Bu, masaüstü bilgisayar ekranları, tabletler, telefonlar vb. Için geçerlidir. Son olarak, Medya sorgusunu "medya özelliği" ile sonlandırırsınız. Yukarıdaki örneğimizde, "orta genişlik: 1000 piksel" dir. Bu, Ortam Sorgusunun en az 1000 piksel genişliğinde ekranlar için tekmeleyeceği anlamına gelir.
- Medya Sorgusu öğelerinin ardından, normal CSS kurallarında yaptığınız işe benzer bir açılış ve kapanış küme ayracı eklersiniz.
- Bir Medya Sorgusunun son adımı, bu koşul karşılandığında, uygulamak istediğiniz CSS kurallarını eklemektir. Bu CSS kurallarını, Ortam Sorgusunu oluşturan küme parantezleri arasına eklersiniz, bunun gibi: @ media ekran ve (min. Width: 1000px) {body {font-size: 20px; }
- Medya Sorgusu koşulları karşılandığında (tarayıcı penceresi en az 1000 piksel genişliğinde), bu CSS stili, sitemizin yazı tipi boyutunu, orijinal olarak 20 piksellik yeni değere yerleştirdiğimiz 16 pikselden değiştirecek.
Daha Fazla Stil Eklemek
Web sitenizin görsel görünümünü düzeltmek için gerektiğinde bu Medya Sorgusu'nda CSS kurallarını yerleştirebilirsiniz. Örneğin, yalnızca yazı tipi boyutunu 20 piksele çıkarmak değil, aynı zamanda tüm paragrafların rengini de siyah (# 000000) olarak değiştirmek isterseniz, bunu ekleyebilirsiniz:
@media ekranı ve (min. genişlik: 1000 piksel) {body {font-size: 20px; } p {color: # 000000; }}Daha Fazla Medya Sorgusu Ekleme
Ayrıca, her büyük boyut için daha fazla Medya Sorgusu ekleyebilir ve bunları stil sayfanıza ekleyebilirsiniz:
@media ekranı ve (min. genişlik: 1000 piksel) {body {font-size: 20px; } p {color: # 000000; {} @media ekranı ve (min. genişlik: 1400 piksel) {body {font-size: 24px; }}İlk Medya Sorguları 1000 piksel genişliğinde başlayacak ve yazı tipi boyutunu 20 piksel olarak değiştirecektir. Ardından, tarayıcı 1400 pikselin üzerinde olduğunda, yazı tipi boyutu tekrar 24 piksele dönüşür. Belirli web siteniz için gereken sayıda Medya Sorgusu ekleyebilirsiniz.
Min Genişlik ve Maksimum Genişlik
Medya Sorguları yazmanın genellikle iki yolu vardır: "min-width" veya "max-width" ile. Şimdiye kadar, "min-genişlik" görüyoruz. Bu, bir tarayıcı en az bu en az genişliğe ulaştığında Medya Sorgularının etkili olmasını sağlar. Dolayısıyla, tarayıcı en az 1000 piksel genişliğinde olduğunda "min-width: 1000px" kullanan bir sorgu uygulanacaktır. Bir Medya Sorgusu stili, bir siteyi "önce mobil" bir şekilde oluştururken kullanılır.
"Maksimum genişlik" kullanırsanız, tersi şekilde çalışır. Tarayıcı bu boyutun altına düştüğünde "max width: 1000px" adlı bir Medya Sorgusu geçerli olacaktır.
Eski Tarayıcılar ile ilgili
Medya Sorguları ile ilgili bir sorun, Internet Explorer'daki eski sürümlerdeki destek eksikliğidir. Neyse ki, daha eski tarayıcılarda Medya Sorguları için destek ekleyebilen çok sayıda katı dolgular vardır , bu sayede bunları web sitelerinde kullanmanıza izin verirken, bu sitenin görüntüsünün eski tarayıcı yazılımlarında bozuk görünmemesini sağlayın.
1/24/17 tarihinde Jeremy Girard tarafından düzenlendi