Tasarımcılar, tasarımlarını kullanıcılara uyacak şekilde ayarlayabilir. Bunun en açık örneği, kullanıcı cihazının form faktörü, genişliği, en boy oranı vb. olabilir. Tasarımcılar medya sorgularını kullanarak bu farklı form faktörlerine yanıt verebilir.
Medya sorguları @media
anahtar kelimesiyle (kuraldaki bir CSS) başlatılır ve çeşitli kullanım alanları için kullanılabilir.
Farklı çıktı türlerini hedefleyin
Web siteleri genellikle ekranlarda görüntülenir ancak CSS ayrıca diğer çıktılar için web sitelerinin stilini belirlemek amacıyla da kullanılabilir. Web sayfalarınızın ekranda farklı şekilde görünmesini, ancak yazdırıldığında farklı görünmesini isteyebilirsiniz. Medya türlerini sorgulamak bunu mümkün kılar.
Bu örnekte arka plan rengi gri olarak ayarlanmıştır. Ancak, sayfa yazdırıldıysa arka plan rengi şeffaf olmalıdır. Böylece, kullanıcının yazıcı mürekkebi kaydedilir.
body {
color: black;
background-color: grey;
}
@media print {
body {
background-color: transparent;
}
}
Stil sayfanızda @media
@ kuralını bu şekilde kullanabilir veya 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
medya türü değeri otomatik olarak all
olur. Bu iki CSS bloğu eşdeğerdir:
body {
color: black;
background-color: white;
}
@media all {
body {
color: black;
background-color: white;
}
}
Bu 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ı denir. CSS yalnızca medya türü eşleşirse ve koşul da doğruysa uygulanır. Bu koşullara medya özellikleri denir.
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 mı (görüntü alanı genişliği yüksekliğinden daha büyük) yoksa dikey modda mı (görüntü alanının yüksekliği genişliğinden büyük) olduğuna bağlı olarak farklı stiller uygulamak istediğinizi varsayalım.
Şunları test etmek için kullanabileceğiniz orientation
adlı bir medya özelliği vardır:
@media all and (orientation: landscape) {
// Styles for landscape mode.
}
@media all and (orientation: portrait) {
// Styles for portrait mode.
}
Ya da ayrı stil sayfalarının olmasını 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 bu değeri boş bırakabilirsiniz:
@media (orientation: landscape) {
// Styles for landscape mode.
}
@media (orientation: portrait) {
// Styles for portrait mode.
}
Veya ayrı stil sayfaları kullanarak:
<link rel="stylesheet" href="landscape.css" media="(orientation: landscape)">
<link rel="stylesheet" href="portrait.css" media="(orientation: portrait)">
Farklı medya türleri (print
gibi) için ayrı stil sayfaları kullanmak iyi olabilir, ancak her medya sorgusu için ayrı bir stil sayfası kullanmak iyi bir fikir olmayabilir. Bunun yerine @media
kuyruklu a kuralı kullanın.
Stilleri görüntü alanı boyutuna göre ayarlayın
Duyarlı tasarım için en yararlı medya özelliklerinden biri tarayıcı görüntü alanının boyutlarını içerir.
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 CSS uzunluk birimleri kullanabilirsiniz.
İçeriğiniz çoğunlukla görselden oluşuyorsa pikseller en uygun seçenek olabilir.
İçeriğiniz çoğunlukla metne dayalıysa em
veya ch
gibi metin boyutuna dayalı göreli bir birim kullanmanız daha mantıklı olur:
@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.
}
İçeriğe göre ayrılma noktalarını seçin
Medya özelliği koşulunun doğru olduğu noktaya ayrılma noktası denir. Ayrılma noktalarınızı popüler cihaz boyutları yerine içeriğinize göre seçmeniz önerilir. Çünkü bunlar her teknoloji sürüm döngüsüyle değiştirilebilir.
Bu örnekte 50em
, metin satırlarının rahatsız edici bir şekilde uzadığı noktadır.
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, arayüz içeriğini "ekranın üst kısmında" optimize etmek için yararlı olabilir. Önceki örnekte, okuyucular geniş ancak kısa bir tarayıcı penceresi kullanıyorsa bir sütunu aşağı, ardından ikinci sütunun en üstüne ulaşmak için tekrar yukarı kaydırmaları gerekir. Sütunları yalnızca görüntü alanı hem yeterince geniş hem de yeterince yüksek olduğunda uygulamak daha güvenli olur.
Medya sorgularını, stillerin yalnızca tüm koşullar doğru olduğunda uygulanacağı şekilde birleştirebilirsiniz.
Bu örnekte, sütun stillerinin uygulanabilmesi için görüntü alanının en az 50em
genişliğinde ve 60em
uzunluğunda 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 örneklerde, tasarımları kullanıcı cihazının form faktörüne uyarlamak için medya sorgularının nasıl kullanılabileceği gösterilmektedir, ancak bunlar olasılıkların sadece küçük bir kısmıdır. Medya sorguları ise genişlik ve yüksekliğin çok daha ötesine geçerek, erişilebilirlik özelliklerine ve tema renklerine ilişkin kullanıcı tercihlerine erişebilir. Düzen düzenlemeleri yapmak için medya sorguları kullanmak, 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.
Medya sorguları yalnızca ekran boyutu için mi mevcut?
Web içeriğinin izlendiği veya gösterildiği tek yer ekranlar mı?
Varsayılan medya türü nedir?
screen
screen
varsayılan tür değil.none
none
geçerli bir medya türü değil.all
some
some
geçerli bir medya türü değil.landscape
landscape
geçerli bir medya türü değil.Tarayıcının bir tasarımı mobil cihazlarda ölçeklendirmesini önlemek için ne kullanırsınız?
width: 100%
font-size: 200%
<meta name="viewport" content="width=device-width, initial-scale=1">
Tarayıcı penceresi 720px
'nin üzerinde olduğunda hangi medya sorgusu geçerli olur?
@media (width: 720px)
720px
olduğunda gerçekleştirilir.@media (max-width: 720px)
720px
değerinin altında olduğunda geçerlidir.@media (min-width: 720px)
720px
olduğundan bu sayfayı okuyabilirsiniz.@media (clamp-width: 720px)
clamp-width
, geçerli bir medya sorgusu özelliği koşulu değil.