Tasarımcılar, tasarımlarını kullanıcılara uygun olacak şekilde 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ını kullanarak bu farklı form faktörlerine yanıt verebilir.
Medya sorguları, @media
anahtar kelimesiyle (CSS at-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, web sitelerine diğer çıkışlar için stil vermek 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 basılı olacaksa 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;
}
}
Stil sayfanızda @media
at-kuralı bu şekilde kullanabilir veya ayrı bir stil sayfası oluşturup link
öğesinde media
özelliğini 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ğeri 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ı denir. CSS yalnızca medya türü eşleştiğinde ve koşul da doğru olduğunda uygulanır. Bu koşullara medya özellikleri denir.
Medya sorguları için söz dizimi şöyledir:
@media type and (feature)
Stilleriniz ayrı bir stil dosyası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ı kullanmayı 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. Varsayılan değer olduğu için isterseniz bu değeri atlayabilirsiniz:
@media (orientation: landscape) {
// Styles for landscape mode.
}
@media (orientation: portrait) {
// Styles for portrait mode.
}
Ayrı stil sayfaları da kullanabilirsiniz:
<link rel="stylesheet" href="landscape.css" media="(orientation: landscape)">
<link rel="stylesheet" href="portrait.css" media="(orientation: portrait)">
print
gibi farklı medya türleri için ayrı stil sayfaları kullanmak uygun olsa da her medya sorgusu için ayrı bir stil sayfası kullanmak muhtemelen iyi bir fikir değildir. Bunun yerine @media
at-rules'i kullanın.
Stilleri görüntü alanı boyutuna göre ayarlama
Duyarlı tasarım için en faydalı medya özelliklerinden biri, tarayıcı görüntü alanının boyutlarını içerir.
Tarayıcı penceresi belirli bir genişlikten daha geniş olduğunda stilleri uygulamak için min-width
öğesini 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 tabanlıysa pikseller en uygun seçenek 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. Popüler cihaz boyutları her teknoloji sürüm döngüsünde değiştiğinden, kesme noktalarınızı popüler cihaz boyutlarına göre değil, içeriğinize göre seçmeniz önerilir.
Bu örnekte, 50em
metin satırlarının rahatsız edici şekilde uzunlaştığı noktadır.
Bu nedenle, arayüzü daha okunaklı hale getirmek için bir kesme 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
Yalnızca genişliğe değil, görüntü alanının yüksekliğine göre medya sorguları 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 yüksek olduğunda uygulamak daha güvenlidir.
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 durma noktaları, içerik miktarına göre seçilmiştir.
@media (min-width: 50em) and (min-height: 60em) {
article {
column-count: 2;
}
}
Bu örneklerde, tasarımları kullanıcının cihazının form faktörüne uyarlamak için medya sorgularının nasıl kullanılabileceği gösterilmektedir ancak bu örnekler, olasılıkların sadece bir kısmını göstermektedir. Medya sorguları, genişlik ve yüksekliğin çok ötesine geçerek erişilebilirlik özellikleri ve tema renkleri için kullanıcı tercihlerine erişebilir. 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.
Medya sorguları yalnızca ekran boyutu için mi mevcut?
Web içeriğinin tüketildiği veya gösterildiği tek yer ekranlar mı?
Varsayılan medya türü nedir?
screen
screen
varsayılan tür değildir.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 engellemek için ne kullanırdınız?
width: 100%
font-size: 200%
<meta name="viewport" content="width=device-width, initial-scale=1">
Tarayıcı penceresi 720px
'nin üstünde olduğunda hangi medya sorgusunun geçerli olacağı.
@media (width: 720px)
720px
'e eşit olduğunda geçerlidir.@media (max-width: 720px)
720px
'ün altında olduğunda kullanılır.@media (min-width: 720px)
720px
olduğu için bunu okuyabilirsiniz.@media (clamp-width: 720px)
clamp-width
, geçerli bir medya sorgusu özellik koşulu değil.