CSS @media İle İlgili Saçma Bir Hata Oluyor? 1px Atlanıyor?

29-09-2021, 22:36:11

Garip bir hata ile karşı karşıyayım, nedenini anlamadım. max-width: 1200px; olduğunda kodlar 1200'de çalışıyor ancak max-width: 1199px; yaptığımda kodlar 1198'de çalışıyor. O aradaki 1px'de kodlar çalışmadığı için site bozuluyor. Neden bu şekilde 1px atlanıyor acaba? Kodlar şu şekilde;

@media only screen and (min-width: 1023px) and (max-width: 1200px) { 

}

Bu kodlar 1023px'den 1200px'e kadarki aralıkta çalışıyor.

@media only screen and (min-width: 1023px) and (max-width: 1199px) {

}

Bu kodlar 1023px'den 1199px'a kadarki aralıkta çalışması gerekirken 1023px'den 1198px'e kadarki aralıkta çalışıyor.

29-09-2021, 22:43:00

#2

Developer

"min-width" vermenize gerek var mı ? max-width: 1199px verip, altına max-width: 1023px verirseniz aynı hesaba gelecektir.

29-09-2021, 22:50:19

#3

SkyGhostAir

burak2yilmaz adlı üyeden alıntı: mesajı görüntüle

"min-width" vermenize gerek var mı ? max-width: 1199px verip, altına max-width: 1023px verirseniz aynı hesaba gelecektir.

min ve max değerler arasında çalışacak CSS'ler için öyle yazıyorum. min vermeden nasıl olacak anlamadım? min için max diye 2. bir @media oluştursam doğru anladıysam diğerinde yazılan tüm CSS'leri geçersiz kılmak için onlarca satır kod yazmak gerekir? Ayrıca sorun min ile alakalı değil ki hocam. min yazmasam da aynı şey oluyor.

29-09-2021, 22:55:27

#4

Developer

CSS'te durum şöyle işler:

Siz normal konfigürasyonları yaparsınız. Sonra dersiniz ki: Şu kadar pixel'in altında şunu yap veya tam tersi. İki farklı alan yapmak bana doğru gelmiyor açıkçası(Tek media'ya iki farklı kural belirlemedim 11 yıldır

). Yani normal yazım tarzına aykırı yazıyorsunuz aslında.

Örneğin bir kutu belirlersiniz ve özelliklerini yazarsınız. Daha sonra bunu gizlersiniz örnek olarak. Sonra dersiniz ki 1199px'ten aşağısında gözük. Daha sonra 768px'e kurarsınız tekrardan ve orada gözükme dersiniz.

29-09-2021, 23:17:40

#5

SkyGhostAir

burak2yilmaz adlı üyeden alıntı: mesajı görüntüle

CSS'te durum şöyle işler:

Siz normal konfigürasyonları yaparsınız. Sonra dersiniz ki: Şu kadar pixel'in altında şunu yap veya tam tersi. İki farklı alan yapmak bana doğru gelmiyor açıkçası(Tek media'ya iki farklı kural belirlemedim 11 yıldır

). Yani normal yazım tarzına aykırı yazıyorsunuz aslında.

Örneğin bir kutu belirlersiniz ve özelliklerini yazarsınız. Daha sonra bunu gizlersiniz örnek olarak. Sonra dersiniz ki 1199px'ten aşağısında gözük. Daha sonra 768px'e kurarsınız tekrardan ve orada gözükme dersiniz.

Fark etmiyor hocam, yine de çalışıyor. Bende yıllardır kullanıyorum bu özelliği, bu gün böyle saçma bir şey oldu anlam veremiyorum. Sonuç olarak şu şekilde yazıldığında ne olması gerekiyor?

@media only screen and (max-width: 1199px) {}

1199'da dahil 1199px'e kadar kod çalışır demek dimi? 1199'da çalışmıyor kod, 1198'de çalışıyor. Düz mantık 1198'de çalışıyorsa 1199+1 yapınca 1200'da çalışması gerekiyor ama +2 oluyor ve 1200'de de çalışıyor. CSS'de @media için 1199px seçilemeyen bir değer mi?

29-09-2021, 23:43:56

#6

Developer

SkyGhostAir adlı üyeden alıntı: mesajı görüntüle

Fark etmiyor hocam, yine de çalışıyor. Bende yıllardır kullanıyorum bu özelliği, bu gün böyle saçma bir şey oldu anlam veremiyorum. Sonuç olarak şu şekilde yazıldığında ne olması gerekiyor?

@media only screen and (max-width: 1199px) {}

1199'da dahil 1199px'e kadar kod çalışır demek dimi? 1199'da çalışmıyor kod, 1198'de çalışıyor. Düz mantık 1198'de çalışıyorsa 1199+1 yapınca 1200'da çalışması gerekiyor ama +2 oluyor ve 1200'de de çalışıyor. CSS'de @media için 1199px seçilemeyen bir değer mi?

Head kısmına

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Ekleyebilir misin ?