Bilmeniz Gereken 9 Gelişmiş Medya Sorgusu CSS Püf Noktası

Başarılı bir web sitesi için kullanışlı, erişilebilir bir deneyim hayati önem taşır. Okuyucularınız olumlu bir deneyime sahipse, ürün satın almak da dahil olmak üzere bir harekete geçirici mesaj gerçekleştirme olasılıkları daha yüksektir. Ayrıca sitenizi başkalarına önerme veya iade etme olasılıkları daha yüksektir. Deneyim anahtardır.

Medya sorguları, web sitenizi özelleştirebilen farklı CSS özellikleri sunar. Her kullanıcının deneyimini, cihazlarının özelliklerine göre uyarlamanıza izin verir. İster telefonlarını ister büyük bir masaüstü monitörünü kullanıyor olsunlar, okuyucularınıza en iyi deneyimi nasıl sunacağınızı öğrenin.

1. işaretçi Özelliği

bu @medya kuralı tasarımınızı birincil işaretleme aygıtına göre özelleştirmenizi sağlayan bir işaretçi özelliğine sahiptir. Kullanılabilirlik ve kalite için test edebilirsiniz.

bu işaretçi medya sorgulama özelliği üç değerden birini alır: yok, kaba veya iyi. bu Yok değer, işaretleme aygıtı olmadığında geçerlidir. bu kaba değer, birincil işaretleme aygıtının doğruluk düzeyi azaldığında geçerlidir. Ve

iyi değer, birincil işaretleme aygıtı yüksek bir doğruluk düzeyine sahip olduğunda geçerlidir.

İşaretçi Özelliğini kullanma

Seçilebilecek Seçenekler: 
 Seçenek bir
 İkinci Seçenek

Yukarıdaki kod, bilgisayarın birincil işaretleme aygıtının doğruluğuna göre değişen iki giriş radyo seçeneği oluşturur.

Doğru (veya yüksek kaliteli) birincil işaretleme aygıtına sahip bir bilgisayar aşağıdaki web sayfasını görüntüler:

Sınırlı doğruluğa (veya düşük kaliteye) sahip bir birincil aygıta sahip bir bilgisayar aşağıdaki web sayfasını görüntüler:

Sınırlı bir doğruluk düzeyine sahip birincil işaretleme aygıtına sahip aygıtta daha büyük radyo düğmeleri bulunur. Bu, bu tür kullanıcılar için daha iyi bir kullanıcı deneyimi sağlar. İşaretçi özelliği ile hangi cihazda olursa olsun tüm kullanıcılarınızın keyifli bir deneyim yaşamasını sağlayabilirsiniz.

2. Herhangi bir işaretçi Özelliği

İşaretçi özelliği gibi, herhangi bir işaretçi medya sorgusu özelliği de işaretleme cihazlarını hedefler. Ancak, herhangi bir işaretçi özelliği, bir bilgisayarın her işaretleme aygıtını değerlendirir. Herhangi bir işaretçi özelliği aynı zamanda Yok, kaba, ve iyi değerler.

Herhangi bir işaretçi Özelliğini kullanma

 @media (herhangi bir işaretçi: iyi) {
 input[type="radyo"] {
 genişlik: 15 piksel;
 yükseklik: 15 piksel;
 sınır yarıçapı: 20 piksel;
 sınır genişliği: 1 piksel;
 }
 }
@media (herhangi bir işaretçi: kaba) {
 input[type="radyo"] {
 genişlik: 25 piksel;
 yükseklik: 25 piksel;
 sınır yarıçapı: 20 piksel;
 sınır genişliği: 2 piksel;
 }
 }

İşaretçi özelliği örneğindeki kodun medya sorgusu bölümüyle yukarıdaki kodu kolayca değiştirebilirsiniz. Yukarıdaki kod, bir bilgisayarın sahip olabileceği herhangi bir işaretleme aygıtının kalitesine göre uygun bir görüntü sağlar.

3. vurgulu Özelliği

Vurgulu ortam sorgusu özelliği, bir cihazın birincil giriş mekanizmasının bir kullanıcı arabirimindeki öğelerin üzerine gelip gelemeyeceğini değerlendirir.

Fareyle üzerine gelme Özelliğini kullanma

 /* CSS */
 a{
 metin-dekorasyon: yok;
 siyah renk;
 }
 @media (fareyle üzerine gelin: fareyle üzerine gelin) {
 a: üzerine gelin {
 renk: mavi;
 }
 }
 HTML 
 Bir bağlantı öğesi

Yukarıdaki kod bir öğe. Bir aygıtın (gezinmeyi destekleyen) birincil giriş mekanizması üzerine geldiğinde rengi (siyahtan maviye) değişecektir.

4. Herhangi bir vurgulu Özellik

bu fareyle üzerine gelmek medya sorgusu, birincil giriş mekanizması da dahil olmak üzere herhangi bir giriş mekanizmasını hedefler.

Herhangi bir fareyle üzerine gelme Özelliğini kullanma

@media (herhangi bir fareyle üzerine gelindiğinde: üzerine gelindiğinde) {
 a: üzerine gelin {
 renk: mavi;
 }
 }

Yukarıdaki medya sorgusu, bir öğenin üzerine gelebilen herhangi bir giriş mekanizması için bir vurgulu efekti üretir.

5. çözünürlük Özelliği

Çözünürlük ortamı sorgulama özelliği, belirli bir cihaz tarafından görüntülenen piksel sayısını hesaplar. İnç başına daha fazla piksel görüntüleyen bir aygıt, görüntüleri daha ayrıntılı olarak görüntülediğinden daha iyi çözünürlüğe sahiptir. Bu özellik, bir geliştiricinin, hangi cihaz kullanıcılarının bir kullanıcı arayüzündeki öğeleri daha net görebileceğine karar vermesine yardımcı olabilir.

Çözünürlük özelliği aralığı kullanır. Bu, kullanmanın yanı sıra çözüm anahtar kelime, kullanabilirsiniz minimum çözünürlük ve maksimum çözünürlük. Ortam sorgusu çözümleme özelliği, çözünürlük veri türüne aittir. Bu, çözünürlük özelliğinin üç birimden birinde ölçülebilir olduğu anlamına gelir: nokta/inç (dpi), santimetre başına nokta (dpcm) veya piksel başına nokta (dppx).

Çözünürlük Özelliğini Kullanma

/* CSS */
@medya (min-çözünürlük: 72dpi) {
 P {
 Beyaz renk;
 arka plan rengi: mavi;
 }
}
 HTML 

 Lorem ipsum dolor sit, amet conectetur adipisicing elit.

Bir cihazın sahip olabileceği ve yine de kaliteli görüntüleri görüntüleyebileceği en düşük çözünürlük 72 dpi'dir. Bu nedenle, bir cihaz 72 dpi veya daha fazla çözünürlüğe sahipse, tarayıcısında aşağıdaki çıktıyı görüntüler:

6. Oryantasyon Özelliği

Bir cihaz görünüm alanı, iki yönden yalnızca birine sahip olabilir: Vesika veya manzara. Görünüm alanı yönlendirmesinin cihaz yönlendirmesinden farklı olduğunu unutmamalısınız. Bir aygıt bir yazılım klavyesi kullanıyorsa, aygıtın kendisi hala dikey konumdayken görünüm alanı dikeyden yataya değişebilir.

Yönlendirme Özelliğini Kullanma

/* CSS */
 gövde{
 ekran: esnek;
 }
 Bölüm{
 kenarlık: 2 piksel düz mavi;
 dolgu: 3 piksel;
 kenar boşluğu: 3 piksel;
 }
 @media (yönlendirme: manzara) {
 gövde {
 esnek yön: satır;
 }
 }
@media (yönlendirme: portre) {
 gövde {
 esnek yön: sütun;
 }
 }
 HTML 
 Lorem ipsum, dolor sit amet conectetur adipisicing elit.

 Lorem ipsum, dolor sit amet conectetur adipisicing elit.

 Lorem ipsum, dolor sit amet conectetur adipisicing elit.

Yukarıdaki kod, bir cihazın yönüne göre bir web sayfasının düzenini değiştirir.

Manzara modunda görünüm penceresi olan bir cihaz aşağıdaki web sayfasını görüntüler:

Dikey modda bir görünüm penceresi olan bir cihaz aşağıdaki web sayfasını görüntüler:

7. yükseklik Özelliği

Yükseklik medya sorgusu özelliği, bir kullanıcının cihazının görüntü alanı yüksekliğine dayalı olarak CSS stilini belirlemenize olanak tanır. Bu özellik menzili destekler, böylece min-yükseklik ve maksimum yükseklik anahtar kelimeler.

Yükseklik Özelliğini kullanma

 /* CSS */
 @media (min-yükseklik: 360 piksel) {
 P{
 kenarlık: 2 piksel noktalı turuncu kırmızı;
 }
}
 HTML 

 Lorem ipsum dolor sit amet conectetur adipisicing elit.

Yukarıdaki kod, bir kullanıcının gördüğünü, cihazının yüksekliğine göre özelleştirir. 360 piksel ve üzeri cihaz yüksekliğine sahip kullanıcılar, aşağıdaki web sayfasına benzer bir şey göreceklerdir:

360 pikselin altındaki yüksekliğe sahip cihazlar, web sayfasındaki paragrafın etrafındaki kenarlığı görüntülemeyecektir.

8. Genişlik Özelliği

Genişlik medya sorgusu özelliği, bir kullanıcının cihazının görüntü alanı genişliğine göre belirli CSS stili oluşturmanıza olanak tanır. Bu özellik aynı zamanda menzili de destekler, böylece minimum genişlik ve maksimum genişlik anahtar kelimeler.

Genişlik Özelliğini Kullanma

 /* CSS */
 @medya (min-genişlik: 600 piksel) {
 P{
 kenarlık: 2 piksel düz mor;
 }
}
 HTML 

 Lorem ipsum dolor sit amet conectetur adipisicing elit.

Yukarıdaki kod, bir kullanıcının gördüğünü, cihazının genişliğine göre özelleştirir. Cihaz genişliği 600 piksel ve üzeri olan kullanıcılar aşağıdaki web sayfasına benzer bir şey göreceklerdir:

Genişlik ve yükseklik tabanlı medya sorgularını kullanmak, şu konularda etkili bir strateji olabilir: web sitenizi duyarlı hale getirme.

9. renk Özelliği

Renkli ortam sorgusu özelliği, bir aygıtın renk bileşenini (kırmızı, yeşil, mavi) değerlendirir. Değer, bir ekranın her bileşen için kaç bit kullandığını ifade eder ve bu, kaç farklı renk gösterebileceğini tanımlar. Modern cihazlar tipik olarak, renk bileşeni başına sekiz bit kullanan 24 bitlik bir ekran kullanır. Ayrıca renksiz bir cihazın sıfır olduğu bir tamsayı değeri alır.

Renk özelliği ayrıca min-renk ve maksimum renk aralıklar.

Renk Özelliğini Kullanma

 /* CSS */
 @medya (min-renk: 7) {
 P{
 kenarlık: 2 piksel düz yeşil;
 }
}
 HTML 

 Lorem ipsum dolor sit amet conectetur adipisicing elit.

Yedi ve üzeri renk bileşenine sahip cihazlar, tarayıcılarında aşağıdaki çıktıyı görüntüler:

Artık Benzersiz Kullanıcı Deneyimleri Yaratabilirsiniz

Web sitenizi veya uygulamanızı ziyaret eden her kullanıcının deneyimini geliştirmek için bu gelişmiş medya sorgularını kullanabilmelisiniz. Mobil kullanıcılara ve masaüstü kullanıcılarına sitenizde eşit derecede olumlu bir deneyim sunmak önemlidir.

Medya sorguları, geliştirici becerilerinizi güçlendirebilecek tek CSS aracı değildir.

Her Geliştiricinin Bilmesi Gereken 8 Temel CSS İpuçları ve Püf Noktaları

Sonrakini Oku

Yazar hakkında