Aralık medya sorguları için yeni söz dizimi

Bu yeni söz diziminin medya sorgularını nasıl kolaylaştırabileceğini öğrenin.

Rachel Andrew

Medya Sorguları, duyarlı tasarımı etkinleştirdi ve görüntü alanının minimum ile maksimum boyutunun test edilmesini sağlayan aralık özellikleri, medya sorguları kullanan sitelerin yaklaşık% 80'i tarafından kullanılıyor. Medya Sorguları Düzey 4 spesifikasyonu, bu aralık sorguları için iyileştirilmiş bir söz dizimi içerir.

Tarayıcı Desteği

Kaynak

Aşağıdaki örnekler, bu özelliğin sorgularınızı nasıl kolaylaştırabileceğini gösterir.

Minimum görüntü alanı genişliği için tipik bir medya sorgusu testi aşağıdaki gibi yazılır:

@media (min-width: 400px) {
  // Styles for viewports with a width of 400 pixels or greater.
}

Yeni söz dizimi, karşılaştırma operatörü kullanılmasına olanak tanır:

@media (width >= 400px) {
  // Styles for viewports with a width of 400 pixels or greater.
}

Maksimum genişlik test ediliyor:

@media (max-width: 30em) {
  // Styles for viewports with a width of 30em or less.
}

Ayrıca, 4. düzey söz dizimini kullanan sürüm:

@media (width <= 30em) {
  // Styles for viewports with a width of 30em or less.
}

Bu söz dizimi, özellikle iki genişlik arasında test yaparken sorguları kolaylaştırma potansiyeline sahiptir. Aşağıdaki örnekte, medya sorgusu genişliği en az 400 piksel, maksimum genişliği 600 piksel olan bir görüntü alanını test eder.

@media (min-width: 400px) and (max-width: 600px) {
  // Styles for viewports between 400px and 600px.
}

Bu kod, yeni söz diziminde şu şekilde yeniden yazılabilir:

@media (400px <= width <= 600px )  {
  // Styles for viewports between 400px and 600px.
}

Test ettiğiniz özellik (bu örnekte width), iki değer arasında yer alır.

Yeni söz dizimi, medya sorgularını daha az ayrıntılı hale getirmenin yanı sıra doğruluk avantajına sahiptir. min- ve max- sorguları, belirtilen değerleri içerir. Örneğin, 400 piksel veya daha büyük bir genişlik için min-width: 400px testleri. Yeni söz dizimi, ne demek istediğinizi daha açık bir şekilde ifade etmenize ve çakışma olasılığından kaçınmanıza olanak tanır.

Yeni aralık söz dizimini henüz uygulamamış olan tarayıcılara yanıt verirken kullanmak için bir PostCSS eklentisi, yeni söz dizimini stil sayfalarınızdaki eski söz dizimine göre yeniden yazacak bir PostCSS eklentisi kullanabilirsiniz.