Kullanıcı arayüzünü, ekranın yenileme hızı özelliklerine göre uyarlayın.
CSS medya sorguları, görünümünü kontrol etmenizi sağlayan bir araçtır. görüntülenmekte olduğu cihazda. Medya sorgularıyla, Farklı ekran boyutları, yönler ve diğer faktörler için farklı düzenler.
İlgili içeriği oluşturmak için kullanılan
update
ortam sorgusu, kullanıcı arayüzünü bir cihazın yenileme hızına uyarlamanızı sağlar. İlgili içeriği oluşturmak için kullanılan
özelliği, fast
, slow
veya none
farklı cihazların özellikleri.
Cihazlar ve yenileme hızı
Tasarladığınız cihazların çoğu yüksek bir yenileme hızına sahip olabilir. Bu masaüstü ve çoğu mobil cihazı içerir.
Cihazı sorgulayabilir, oluşturma için yenileme hızının yüksek olup olmadığına bakabilirsiniz ve stili uygun şekilde yapılandırmalısınız.
@media (update: fast) {
/* computer screens, totally cool to animate */
}
e-Okuyucular ve düşük destekli ödeme sistemleri gibi cihazlarda yenileme hızı. Cihazın animasyon veya sıklıkla güncellemelerinin yanı sıra pil kullanımından veya hatalı görünüm güncellemelerinden tasarruf edebileceğiniz anlamına gelir.
@media (update: slow) {
/* e-book readers or severely underpowered devices */
}
Son olarak, basılı kağıt veya e-mürekkeple ekranlar gibi
tek bir oluşturma geçişi
sunabilirsiniz. Bu şekilde çıkış hiç yenilenemiyor ve
none
olarak anılır. Şu şekilde sorgulanabilir:
@media (update: none) {
/* one time render like printed paper */
}
Aşağıdaki CodePen'de, şu yeni medya güncelleme sorgusu: