Medya sorguları

Tasarımcılar, tasarımlarını kullanıcılara göre ayarlayabilir. Bunun en açık örneği, kullanıcının cihazının form faktörüdür. genişliği, cihaz en boy oranı vb. Tasarımcılar, medya sorguları kullanarak bu farklı form faktörlerine yanıt verebilir.

Medya sorguları, @media anahtar kelimesiyle (bir CSS kuralı) başlatılır ve çeşitli kullanım alanları için kullanılabilir.

Farklı çıkış türlerini hedefleyin

Web siteleri genellikle ekranlarda gösterilir ancak CSS, diğer çıktılar için web sitelerini biçimlendirmek amacıyla da kullanılabilir. Web sayfalarınızın ekranda belirli bir yönde görünüp yazdırıldığında farklı görünmesini isteyebilirsiniz. Medya türlerinin sorgulanması bunu mümkün kılar.

Bu örnekte, arka plan rengi gri olarak ayarlanmıştır. Ancak sayfa yazdırılırsa arka plan rengi şeffaf olmalıdır. Bu işlem, kullanıcının yazıcı mürekkebini kaydeder.

body {
  color: black;
  background-color: grey;
}

@media print {
  body {
    background-color: transparent;
  }
}

@media kuvvetini stil sayfanızda bu şekilde kullanabilirsiniz, ya da ayrı bir stil sayfası oluşturup media özelliğini bir link öğesinde kullanabilirsiniz:

<link rel="stylesheet" href="global.css">
<link rel="stylesheet" href="print.css" media="print">

CSS'niz için herhangi bir medya türü belirtmezseniz otomatik olarak all medya türü değerine sahip olur. Bu iki CSS bloğu eşdeğerdir:

body {
  color: black;
  background-color: white;
}

@media all {
   body {
     color: black;
     background-color: white;
   }
}

Aşağıdaki iki HTML satırı da eşdeğerdir:

<link rel="stylesheet" href="global.css">

<link rel="stylesheet" href="global.css" media="all">

Sorgu koşulları

Medya türlerine koşul ekleyebilirsiniz. Bunlara medya sorguları adı verilir. CSS yalnızca medya türü eşleşirse ve koşul da doğruysa uygulanır. Bu koşullara medya özellikleri adı verilir.

Medya sorguları için söz dizimi şöyledir:

@media type and (feature)

Stilleriniz ayrı bir stil sayfasındaysa link öğesinde medya sorgularını kullanabilirsiniz:

<link rel="stylesheet" href="specific.css" media="type and (feature)">

Tarayıcı penceresinin yatay modda olup olmamasına bağlı olarak farklı stiller uygulamak istediğinizi varsayalım (görüntü alanının genişliği yüksekliğinden büyükse) veya dikey modda (görüntü alanının yüksekliği genişliğinden büyükse). orientation adlı medya özelliğini kullanarak şunları test edebilirsiniz:

@media all and (orientation: landscape) {
   // Styles for landscape mode.
}
@media all and (orientation: portrait) {
   // Styles for portrait mode.
}

Ayrı stil sayfalarına sahip olmayı tercih ederseniz:

<link rel="stylesheet" href="landscape.css" media="all and (orientation: landscape)">
<link rel="stylesheet" href="portrait.css" media="all and (orientation: portrait)">

Bu durumda, medya türü all olur. Bu varsayılan değer olduğundan, isterseniz bunu bırakabilirsiniz:

@media (orientation: landscape) {
   // Styles for landscape mode.
}
@media (orientation: portrait) {
   // Styles for portrait mode.
}

Dilerseniz ayrı stil sayfaları kullanabilirsiniz:

<link rel="stylesheet" href="landscape.css" media="(orientation: landscape)">
<link rel="stylesheet" href="portrait.css" media="(orientation: portrait)">

Farklı medya türleri için (print gibi) ayrı stil sayfaları kullanmak da bir sorun teşkil etmez. Her medya sorgusu için ayrı bir stil sayfası kullanmak iyi bir fikir olmayabilir. Bunun yerine @media kuvvetleri kurallarını kullanın.

Stilleri görüntü alanı boyutuna göre ayarla

Duyarlı tasarım için, en yararlı medya özelliklerinden biri, tarayıcı görüntü alanının boyutlarıdır. Tarayıcı penceresi belirli bir genişlikten geniş olduğunda stilleri uygulamak için min-width işlevini kullanın.

@media (min-width: 400px) {
  // Styles for viewports wider than 400 pixels.
}

Belirli bir genişliğin altındaki stilleri uygulamak için max-width medya özelliğini kullanın:

@media (max-width: 400px) {
  // Styles for viewports narrower than 400 pixels.
}

Medya sorgularınızda herhangi bir CSS uzunluk birimini kullanabilirsiniz. İçeriğiniz çoğunlukla görsel temelliyse pikseller daha mantıklı olabilir. İçeriğiniz çoğunlukla metne dayalıysa em veya ch gibi metin boyutunu temel alan bir göreceli birim kullanmak daha mantıklı olabilir:

@media (min-width: 25em) {
  // Styles for viewports wider than 25em.
}

Birden fazla koşul uygulamak için medya sorgularını da birleştirebilirsiniz. Medya sorgularınızı birleştirmek için and kelimesini kullanın:

@media (min-width: 50em) and (max-width: 60em) {
  // Styles for viewports wider than 50em and narrower than 60em.
}

Ayrılma noktalarını içeriğe göre seçin

Bir medya özelliği koşulunun doğru olduğu noktaya ayrılma noktası adı verilir. Ayrılma noktalarınızı popüler cihaz boyutlarına göre değil içeriğinize göre seçmeniz önerilir. çünkü bu konular, her teknoloji yayını döngüsünde değişebilir.

Bu örnekte, 50em metin satırlarının rahatsız edici biçimde uzun olduğu noktadır. Bu nedenle, arayüzün daha okunaklı olması için bir ayrılma noktası oluşturulur. column-count özelliği kullanılarak, metin bu noktadan itibaren iki sütuna bölünür.

@media (min-width: 50em) {
  article {
    column-count: 2;
  }
}

Kombinasyonlar

Medya sorgularını yalnızca genişliğe değil, görüntü alanının yüksekliğine göre de kullanabilirsiniz. Bu, "ekranın üst kısmındaki" arayüz içeriğini optimize etmek için yararlı olabilir. Önceki örnekte, Okuyucular geniş ancak kısa bir tarayıcı penceresi kullanıyorsa bir sütun aşağı kaydırmaları, sonra da ikinci sütunun en üstüne çıkmak için tekrar yukarı kaydırmaları gerekir. Sütunları yalnızca görüntü alanı hem yeterince geniş hem de yeterince uzun olduğunda uygulamak daha güvenli olur.

Medya sorgularını birleştirerek stillerin yalnızca tüm koşullar doğru olduğunda geçerli olmasını sağlayabilirsiniz. Bu örnekte, sütun stillerinin uygulanabilmesi için görüntü alanının en az 50em genişliğinde ve 60em yüksekliğinde olması gerekir. Bu ayrılma noktaları, içerik miktarına göre seçildi.

@media (min-width: 50em) and (min-height: 60em) {
  article {
    column-count: 2;
  }
}

Bu örnekler, medya sorgularının tasarımları kullanıcı cihazının form faktörüne uyarlamak için nasıl kullanılabileceğini, ancak bunlar olasılıkların yalnızca küçük bir kısmını çiziyor. Medya sorguları genişlik ve yüksekliğin çok ötesine geçebilir. erişilebilirlik özellikleri ve tema renkleri ile ilgili kullanıcı tercihlerine erişme. Düzen düzenlemeleri yapmak üzere medya sorgularının kullanılması, bu özellikleri ve daha fazlasını temel alan duyarlı bir tasarım için mükemmel bir başlangıçtır.

Öğrendiklerinizi sınayın

Duyarlı medya sorguları hakkındaki bilginizi test edin.