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

Bu yeni söz dizimi, medya sorgularını nasıl kolaylaştırabilir?

Rachel Andrew

Medya sorguları duyarlı tasarımı etkinleştirdi ve görüntü alanının minimum ve maksimum boyutunu test etmeyi sağlayan aralık özellikleri, medya sorgularını 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 örneklerde, bu özelliğin sorgularınızı nasıl kolaylaştırabileceği gösterilmektedir.

Minimum görüntü alanı genişliği için test edilen tipik bir medya sorgusu 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ünün kullanılmasına olanak tanır:

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

Maksimum genişlik için test etme:

@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ırabilir. Aşağıdaki örnekte medya sorgusu, minimum 400 piksel ve maksimum 600 piksel genişliğinde bir görüntü alanı için test yapar.

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

Bu ifade, yeni söz dizimi kullanılarak ş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 da sahiptir. min- ve max- sorguları, belirtilen değerleri içerir. Örneğin, min-width: 400px 400 piksel veya daha büyük genişlik için test yapar. Yeni söz dizimi, neyi kastettiğiniz konusunda daha açık olmanızı ve sorgu çakışması olasılığını önlemenizi sağlar.

Henüz uygulamamış olan tarayıcıları hesaba katarak yeni aralık söz dizimini kullanmak için stil sayfalarınızda yeni söz dizimini eski söz dizimine yeniden yazan bir PostCSS eklentisi vardır.