Mobil Medya Sorguları

Medya sorguları nedir?

  • Medya sorguları, modern web sitelerini ve blogları oluşturmak için gerekli CSS talimatlarıdır
  • Farklı boyutlu ekranlar için farklı css talimatlarının kullanılmasına izin veriyorlar.

Medya sorguları, aynı içeriği farklı boyut ekranlarında farklı şekilde sunmanıza izin verir. Çoğu kişi, onları bir telefon veya masaüstü bilgisayar üzerinde iyi bir görünüm elde etmenin bir yolu olarak düşünür.

Medya sorguları ne yapıyor?

Medya sorguları, farklı boyut ekranları için farklı talimatlar (css) sağlar.

Dolayısıyla insan açısından biz şöyle bir şey söyleyebiliriz …

“Birisi bir masaüstü bilgisayarda olduğunda, web sayfası metnimin kırmızı olmasını istiyorum, biri cep telefonundayken web sayfası metnimin yeşil olmasını istiyorum.”

CSS ile yapabileceğiniz her şeyi, medya sorgularıyla yapabilirsiniz. Çoğu insanın yapmak istediği şey, web sayfalarının görüntülenen her ekranda harika görünmesini sağlamaktır.

Medya sorguları nasıl çalışır?

Özetle, iki şey yapıyorlar.

  • Bir ekranın ne kadar büyük olduğunu öğreniyorlar.
  • Bulunan ekranın boyutu için CSS uygularlar.

Medya sorguları ile çalışma

Medya sorguları, CSS dosyanızın bir parçasıdır. Yukarıda belirttiğimiz örneği kullanalım. Masaüstü bilgisayarlar için kırmızı metin, mobil cihazlar için yeşil metin istediğimizi söyledik.

İşte bunu yapacak bir CSS örneği …

p{color:green;}
@media(min-width:900px){p{color:red;}}

Şimdi bunu, her parçaya bakarak ve beyinimizi eritmeyecek bir şekilde tarif ederek çevirelim.

İlk satır sadece normal CSS ..

p{color:green;}

Metnin renginin yeşil olacağı söyleniyor.

İkinci satır bir medya sorgusu …

@media(min-width:900px){p{color:red;}}

Medya sorgumuz diyor ki …

  1. @ Medya – Bu, bir medya sorgusu gerçekleşmesi demektir
  2. (Min-width: 900px) {} – Bu, ekranın en az 900 piksel genişliğinde parantezler arasındaki css’nin uygulanması gerektiği anlamına gelir.
  3. P {color: red;} – Bu, ekran 900 pikselden genişse uygulanması gereken CSS’dir.

Duyarlı tasarım için ortam sorgularını kullanma

Yukarıdaki örneğimizde, kırmızı metin içeren masaüstü sürümünün açıkça bir medya sorgusu olarak belirtildiğini fark etmiş olabilirsiniz, ancak yeşil metin içeren mobil sürüm değil.

Unutmayın, css’imiz …

p{color:green;}
@media(min-width:900px){p{color:red;}}
  • İlk satır sadece normal CSS’dir (koşullu olmayan talimat seti)
  • İkinci satır medya sorgusudur (koşullu bir talimat seti)

Dolayısıyla, bir cep telefonu veya tablet kullanan biri bu sayfayı ziyaret ederse, yeşil metin görür (normal css’yi kullanır). Kırmızı metin, yalnızca bir masaüstü gibi 900 pikselden daha geniş bir ekran kullanıldığında ortaya çıkar (daha sonra ortam sorgusunu tetikler).

Buna bazen mobil ilk tasarım denir , ancak basitçe, medya sorgularının koşullu bir talimat seti olduğunu ve koşulsuz talimatların en küçük ekran için olması gerektiğini anlamaktır.

(Eğer bu olur – bu olmazsa bu css kullanın – bu css’yi kullanmayın)

Medya sorguları, belirli koşullar için belirli css talimatları eklememize izin verir.

 

 

Kısa Özet
Yayın Tarihi
Konunun Adı
Mobil Medya Sorguları
Verilen Puan
51star1star1star1star1star

Leave a Reply

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir