Aralık Vererek Media Query Girmek

Dec 13, 2022

Web sitesi yaparken herkesin mutlaka baktığı şeylerden birisi de media queries ler yani namı değer Responsive Design. Bir sayfayı responsive yaparken genellikle:

Sayfanın genişliği minimum x kadar genişlikteyse
Sayfanın genişliği maksimm x kadar genişlikteyse

şeklinde kural setleri belirliyoruz. İşte bu kural setlerini farklı bir yazım şekli ile değiştirebileceğiz:

Önceden minimum genişiği 768px olan bir sayfa için media query girerken:

@media(min-width: 768px) {
  body {
    background-color: aqua;
  }
}

Yeni kural setinde ise:

@media(width >= 768px) {
  body {
    background-color: aqua;
  }
}

See the Pen Media Queries: Range Syntax - min-width: 768 by Ibrahim Nergiz (@phyesix) on CodePen.

https://cpwebassets.codepen.io/assets/embed/ei.js

gibi çok daha kolay bir yazım şekline geçiyoruz. Sanki yeni öğrenen birisi için yeni kural set daha anlaşılabilir olmuş gibi. Biraz örnek sayısını da artıracak olursam:

Önceki yazım:

@media(min-width: 576px) and (max-width: 768px) {
  body {
    border: 50px solid red;
  }
}

Yeni yazım:

@media(576px <= width <= 768px) {
  body {
    border: 50px solid red;
  }
}

See the Pen Media Queries: Range Syntax - min-width: 576px and max-width: 768px by Ibrahim Nergiz (@phyesix) on CodePen.

https://cpwebassets.codepen.io/assets/embed/ei.js

Yukarıdaki örneklerden farklı olarak, not değerini, negatif genişlik veya yükseklikleri, resolution a bağlı bir çok şeyi rahatlıkla yazabileceğiz.

@media not (width <= -100px) {
  body { background: green; }
}

@media (height > -100px) {
  body { background: green; }
}

@media not (resolution: -300dpi) {
  body { background: green; }
}

See the Pen Media Queries: Range Syntax - not value by Ibrahim Nergiz (@phyesix) on CodePen.

https://cpwebassets.codepen.io/assets/embed/ei.js

Şu an her ne kadar Safari ve IE de destek olmasa da rahat rahat kullanabilirsiniz: