CSS3 ile tarayıcı boyutlarını tespit edin

dünyasına tam anlamıyla başladığımızda duyarlı tasarım yeni kuralların ne olduğunu bilmek önemlidir. CSS3, bu, web sitesinin veya uygulamanın görüntülendiği ekranın boyutlarını algılamamıza yardımcı olur.
Bu kurallardan biri @yarım, uygun koşulların kombinasyonu ile ekranın boyutunu bu şekilde bilmemizi ve sonuca bağlı olarak tasarımıyla ilgili uygun önlemleri almamızı sağlar.

Medya sorgularını kullanma

Bir kod oluşturalım HTML basit ve orada bizim için kuralları içerecek olan stil sayfamızı ekleyeceğiz. demek istiyorum, görelim:

 Ekran boyutlarını algıla 

Gördüğümüz gibi, oldukça basit bir kod, ancak vurgulanması gereken birkaç şey var. İlki etiketlere eklenmiştir stil, orada iki kuralımız var, ilki şunu gösteriyor 600 piksel etiketteki metnimizin arka plan rengi h1 Maviye dönecek, bakalım ne zaman tarayıcıda yeniden boyutlandıracağız ve bu değişiklik yürürlüğe girecek:

İkinci kural, maksimum genişliğin 400 piksel 400 pikselin altındaki her şey kırmızı ve 600'ün üzerindeki her şey mavi olacağından, metnin arka plan rengi kırmızıya dönecek, bu da üçüncü bir koşulu gösterir, bu nedenle 401'den 599 piksele kadar rengi varsayılan olarak beyaz tutacaktır, bir bakalım:

Son olarak tarayıcımızın ekranını çok daha küçültürsek kırmızı arka plan rengimiz için kuralı gireceğiz bakalım nasıl görünüyor:

Tarayıcımızın boyutlarını algılamanın son derece basit bir iş olduğunu görüyoruz. CSS3, duyarlı tasarımlarla çalışırken son derece yararlı olan bir şey ve web sitemizin herhangi bir cihazda ve mevcut ekran çözünürlüğünde iyi görünmesini sağlayan stiller uygulamak için kullanıcının tarayıcısının boyutlarını bilmemiz gerekiyor.