Medya özelliklerinin cihazlara ve tercihlere yanıt vermenize olanak tanıdığı tüm yolların bir özeti.
Medya sorguları olmadan duyarlı tasarım mümkün olmazdı. Medya sorgularından önce, web sitenizi ziyaret etmek için kullanıcıların ne tür bir cihaz kullandığını bilmenin bir yolu yoktu. Tasarımcılar varsayımlarda bulunmak zorundaydı. Bu varsayımlar, sabit genişlikli tasarımlara veya sıvı düzenlerde kodlanıyordu.
Medya sorgularının kullanıma sunulmasıyla bu durum tümüyle değişti. İlk kez tasarımcılar insanlarla yarı yarıya buluşabiliyordu. Tasarımcılar, düzenlerini kullanıcıların cihazlarına yanıt verecek şekilde ayarlayabiliyordu.
Bir medya sorgusunun, isteğe bağlı bir medya türü ile zorunlu bir medya özelliğinden oluştuğunu unutmayın. Yıllar içinde medya türlerinde fazla bir değişiklik olmamıştır. Yine de dört olası değer vardır:
@media all
@media screen
@media print
@media speech
Öte yandan medya özellikleri büyük ölçüde genişledi. Tasarımcılar artık tasarımları ekran boyutundan çok daha fazlasına uyacak şekilde uyarlayarak kullanıcıların yarısının ötesine geçebiliyor.
Görüntü alanı boyutları
Web'de açık arayla en popüler medya sorguları, görüntü alanı genişliğiyle ilgili olan sorgulardır. Ancak burada bile size bir seçenek sunulur. Belirli bir genişliğin altındaki stilleri uygulamak için max-width medya özelliğini veya belirli bir genişliğin üzerindeki stilleri uygulamak için min-width medya özelliğini kullanabilirsiniz.
main {
display: grid;
grid-template-columns: 2fr 1fr;
}
@media (max-width: 45em) {
main {
display: block;
}
}
@media (min-width: 45em) {
main {
display: grid;
grid-template-columns: 2fr 1fr;
}
}
Kişisel olarak min-width kullanmayı seviyorum. Düzen stillerini eklemeli bir şekilde uyguluyorum. Önceki kuralları geri almak yerine her ayrılma noktasında yeni düzen kurallarını kullanıma sunuyorum.
Bu ek yaklaşım, yükseklik için de işe yarar. min-height ile daha fazla görüntü alanı yüksekliği kullanılabilir hale geldikçe daha fazla kural ekleyebilirsiniz. Örneğin, yeterli dikey alan varsa tarayıcı penceresinin en üstüne sabitlemek istediğiniz bir başlık öğeniz olabilir.
@media (min-height: 30em) {
header {
position: fixed;
}
}
Ancak dilerseniz max-height medya özelliğini kullanabilirsiniz. Burada, başlık varsayılan olarak sabittir ancak yeterli dikey alan yoksa yapışkanlık kaldırılır.
header {
position: fixed;
}
@media (max-height: 30em) {
header {
position: static;
}
}
min- ile max- önekleri arasından seçim yapmak yalnızca width ve height için geçerli değildir. aspect-ratio medya özelliği de aynı seçeneği sunar. Stilleri tam genişlik-yükseklik oranında uygulamak isterseniz öneksiz bir sürüm de sunar.
@media (min-aspect-ratio: 16/9) {
// The ratio of width to height is at least 16 by 9.
}
@media (max-aspect-ratio: 16/9) {
// The ratio of width to height is less than 16 by 9.
}
@media (aspect-ratio: 16/9) {
// The ratio of width to height is exactly 16 by 9.
}
Farklı en boy oranları için farklı stiller sağlamak, iş yükünüzü kısa sürede halledebilir. Bu kadar ayrıntılı bir kontrole ihtiyacınız yoksa orientation medya özelliği ihtiyaçlarınıza daha uygun olabilir. İki farklı değeri olabilir: portrait veya landscape.
@media (orientation: portrait) {
// The width is less than the height.
}
@media (orientation: landscape) {
// The width is greater than the height.
}
Mobil cihazların yönünü belirtmek için genellikle "dikey" ve "yatay" terimleri kullanılsa da orientation medya özelliği cihaza özel değildir. Tipik bir dizüstü bilgisayardaki tam ekran tarayıcı penceresinin orientation değeri landscape olur.
Ekranlar
Farklı ekranlarda, inç başına nokta sayısı (dpi) cinsinden ölçülen farklı piksel yoğunlukları vardır. resolution medya özelliğini kullanarak stillerinizi farklı piksel yoğunluklarına göre ayarlayabilirsiniz. aspect-ratio gibi resolution de üç çeşittir: minimum, maksimum ve tam.
@media (min-resolution: 300dpi) {
// The display has a pixel density of at least 300 dots per inch.
}
@media (max-resolution: 300dpi) {
// The display has a pixel density less than 300 dots per inch.
}
@media (resolution: 300dpi) {
// The display has a pixel density of exactly 300 dots per inch.
}
Hiçbir zaman resolution medya sorgusu kullanmanız gerekmeyebilir. Piksel yoğunluğu genellikle yalnızca resimler için bir sorun teşkil eder. Duyarlı resimler, piksel yoğunluğunu doğrudan HTML'de çözmenin bir yoludur.
Diğer yandan, animasyonlarınızı ve geçişlerinizi CSS'de tanımlarsınız. update medya özelliğini kullanarak bu animasyonları ve geçişleri farklı yenileme hızlarına yanıt verecek şekilde ayarlayabilirsiniz. Bu medya özelliği, şu üç değerden birini bildirir: none, slow ve fast.
update değeri none ise yenileme hızı olmadığı anlamına gelir. Örneğin, basılı bir sayfa güncellenemez.
update değeri slow ise ekranın hızlı bir şekilde yenilenemeyeceği anlamına gelir. E-mürekkep ekran, yenileme hızı yavaş olan ekranlara bir örnektir.
update değerinin fast olması, ekranın animasyonları ve geçişleri işleyecek kadar hızlı yenileneceği anlamına gelir.
@media (update: fast) {
a {
transition-duration: 0.4s;
transition-property: transform;
}
a:hover {
transform: scale(150%);
}
}
Ekranın tüm özellikleri donanım özellikleriyle ilgili değildir. Temayla ilgili modülde, bir web uygulaması manifest dosyasında özelliklerin nasıl tanımlanacağını gördünüz. Bu özelliklerden biri display olarak adlandırılır. Bu özelliğe fullscreen, standalone, minimum-ui veya browser değeri verebilirsiniz. İlgili display-mode medya özelliği, stillerinizi bu farklı seçeneklere göre uyarlamanıza olanak tanır.
Web uygulaması manifestinizde display için standalone değeri sağladığınızı varsayalım. Birisi sitenizi ana ekranına eklerse, herhangi bir tarayıcı arayüzü olmadan açılır. Bu kullanıcılara geri düğmesi göstermeye karar verebilirsiniz.
button.back {
display: none;
}
@media (display-mode: standalone) {
button.back {
display: inline;
}
}
Renk
Bir cihazın renk özelliklerini sorgulamaya yönelik çok sayıda medya özelliği vardır. Stillerinizi yalnızca gri tonları çıkan herhangi bir ekran için ayarlamak istiyorsanız monochrome medya özelliğini herhangi bir değer olmadan kullanabilirsiniz.
@media (monochrome) {
body {
color: black;
background-color: white;
}
}
İlgili bir color medya özelliği vardır.
@media (color) {
body {
color: maroon;
background-color: linen;
}
}
Renkli ekranlarda sorgular için color-gamut, color-index veya dynamic-range medya özelliklerini kullanarak sorgu yazabilirsiniz. Hepsi, ekranın renk özellikleri hakkında belirli ayrıntıları bildirir.
Bu örnekte renk değerleri, ekranın maksimum parlaklık, renk derinliği ve kontrast oranı kombinasyonunu bildiren dynamic-range medya özelliğine yanıt olarak güncellenir. Olası değerler standard veya high'dir. dynamic-range değerini high olarak bildiren yüksek tanımlı bir ekrana, yeni CSS color() işlevi kullanılarak farklı bir renk alanı verilir.
.neon-red {
color: hsl(355 100% 95%);
}
@media (dynamic-range: high) {
.neon-red {
color: color(display-p3 1 0 0);
}
}
Etkileşim
Medya özellikleri, sitenizle etkileşim kurmak için kullanılan giriş mekanizması türünü de bildirebilir: hover, any-hover, pointer ve any-pointer. Daha ayrıntılı bilgi için etkileşimle ilgili modülü inceleyin.
Tercihler
Kullanıcı tercihlerine yanıt vermenize olanak tanıyan bir dizi medya sorgusu vardır: prefers-color-scheme, prefers-contrast ve prefers-reduced-motion. Daha fazla ayrıntı için tema ve erişilebilirlik konularındaki modüllere göz atın.
Medya özelliklerini tek bir medya sorgusunda birleştirebilirsiniz. Animasyon stillerinizin kapsamını yalnızca cihazın hızlı yenileme hızı varsa ve kullanıcı daha az hareket tercih etmediyse uygulanacak şekilde ayarlayabilirsiniz.
@media (update: fast) and (prefers-reduced-motion: no-preference) {
a {
transition-duration: 0.4s;
transition-property: transform;
}
a:hover {
transform: scale(150%);
}
}
Diğer medya özellikleri
Yakında başka medya özellikleri de eklenecek.
forced-colors ve inverted-colors medya özellikleri, cihazda kullanılan renk paletinin kısıtlanmış mı yoksa ters çevrilmiş mi olduğunu bildirir.
scripting medya özelliği, CSS'nizi JavaScript'in kullanılabilirliğine göre ayarlamanıza olanak tanır.
prefers-reduced-data adlı medya özelliği, kullanıcıların sayaçlı bir bağlantıda olduklarını belirtmelerine olanak tanır. Böylece daha küçük veya daha az öğe gönderebilirsiniz.
Diğer teklifler henüz oluşturulma aşamasındadır. Sonraki ve son modülde, farklı ekran yapılandırmalarını işleyen bir medya özelliği için teklif hakkında bilgi edineceksiniz.
Öğrendiklerinizi sınayın
Medya özellikleri hakkındaki bilginizi test edin
Medya sorgusu, @media (width: 1024px) gibi belirli bir genişlikteki cihazı kontrol edebilir.
1023px değerinin üzerinde ve 1025px altında genişlik eş zamanlı olarak kontrol edilerek sağlanabilir.min-width ve max-width kullanılabilir.Medya sorgusu, @media (aspect-ratio: 4/3) gibi belirli bir aspect-ratio içindeki cihazı kontrol edebilir.
aspect-ratio için mevcut.Hangisi geçerli renk medya sorgularıdır?
@media (color)@media (monochrome)@media (color-gamut: srgb)@media (min-color-index: 15000)@media (dynamic-range: high)Aşağıdaki kullanıcı tercihi medya sorgularından hangileri geçerlidir?
@media (prefers-color-scheme: dark)@media (prefers-colors: high-definition)@media (prefers-reduced-motion: reduce)@media (prefers-contrast: more)@media (prefers-site-speed: fast)