Kullanıcı arayüzünüzü ekranın yenileme hızı özelliklerine uyarlayın.
CSS medya sorguları, web sitenizin veya web uygulamanızın görünümünü görüntülendiği cihaza göre kontrol etmenizi sağlayan 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ıza olanak tanıyan bir yöntem sunar. Bu özellik, farklı cihazların becerileriyle ilgili olarak fast, slow veya none değerini bildirebilir.
Cihazlar ve yenileme hızı
Tasarladığınız cihazların çoğunun hızlı bir yenileme hızına sahip olma olasılığı yüksektir. Buna masaüstü bilgisayarlar ve çoğu mobil cihaz dahildir.
Cihazı sorgulayabilir, içeriğin oluşturulması için hızlı bir yenileme hızına sahip olup olmadığını görebilir ve tek bir stil sayfası yayınlamaya devam ederken uygun şekilde stil belirleyebilirsiniz.
@media (update: fast) {
/* computer screens, totally cool to animate */
}
e-Okuyucuların ve düşük güçlü ödeme sistemleri gibi cihazların yenileme hızı yavaş olabilir. Cihazın animasyonları veya sık yapılan güncellemeleri işleyemediğini bildiğinizde pil kullanımından veya hatalı görüntüleme güncellemelerinden tasarruf edebilirsiniz.
@media (update: slow) {
/* e-book readers or severely underpowered devices */
}
Son olarak, basılı kağıt veya e-mürekkep ekranlar gibi yalnızca tek bir görüntü oluşturma
kartı sunabilecek senaryolar da vardır. Böyle bir çıkış hiç yenilenemez ve none olarak adlandırılır. Bu sorgu şu şekilde sorgulanabilir:
@media (update: none) {
/* one time render like printed paper */
}
Aşağıdaki CodePen'de, bu yeni güncelleme medya sorgusunu kullanarak kademeli olarak iyileştirilmiş bir fareyle üzerine gelme animasyonu görebilirsiniz: