CSS medya sorgusunu güncelleme

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

Adam Argyle

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:

Diğer kaynaklar

• CSS Medya Sorguları Düzey 4
• MDN'de Medya Sorgusunu Güncelleme