CSS medya sorgusunu güncelleme

Kullanıcı arayüzünüzü ekranın yenileme hızı özelliklerine uyarlayın.

Adam Argyle

CSS medya sorguları, web sitenizin veya web uygulamanızın görünümünü görüntülendiği cihaza göre kontrol etmenize olanak tanıyan güçlü bir araçtır. Medya sorgularıyla farklı ekran boyutları, yönler ve diğer faktörler için farklı düzenler oluşturabilirsiniz.

update medya sorgusu, kullanıcı arayüzünü cihazın yenileme hızına uyarlamanızı sağlar. Bu özellik, farklı cihazların özelliklerine ilişkin fast, slow veya none değerini bildirebilir.

Cihazlar ve yenileme hızı

Tasarımınıza uygun cihazların çoğunun yenileme hızı yüksektir. Buna masaüstü bilgisayarlar ve çoğu mobil cihaz dahildir.

Cihazı sorgulayabilir, içerik oluşturmak için hızlı bir yenileme hızına sahip olup olmadığını görebilir ve tek bir stil sayfası sunmaya devam ederken buna uygun bir stil belirleyebilirsiniz.

@media (update: fast) {
  /* computer screens, totally cool to animate */
}

e-Okuyucuların ve düşük destekli ödeme sistemleri gibi cihazların yenileme hızı yavaş olabilir. Cihazın animasyon veya sık güncellemeleri kaldıramayacağını bilmek, pil kullanımını veya hatalı görüntü güncellemelerini azaltmanız anlamına gelir.

@media (update: slow) {
  /* e-book readers or severely underpowered devices */
}

Son olarak, basılı kağıt veya e-mürekkep ekran gibi yalnızca tek bir oluşturma pasosu sunabilen senaryolar vardır. Bu tür çıkışlar hiç yenilenemez ve none olarak adlandırılır. Bu veri aşağıdaki gibi sorgulanabilir:

@media (update: none) {
  /* one time render like printed paper */
}

Aşağıdaki CodePen'de, bu yeni güncelleme medya sorgusunu kullanarak kademeli olarak geliştirilmiş bir fareyle üzerine gelme animasyonunu görebilirsiniz:

Diğer kaynaklar

• CSS Medya Sorguları 4. Seviye
• MDN'de Medya Sorgusunu Güncelleme