Css Media Queryler

16-09-2021, 12:14:33

Merhaba arkadaşlar

front end tasarım yaparken sabit bir css breakpointler nelerdir? Mobil cihazlar, 13inc 15inc 16inc 19inc vb ekran çözünürlükleri için stabil sağlıklı media querryleri merak etmekteyim. 1920 ekranlarda windows çözünürlük %125 olduğunda dahi 1920 px için yazdığımız css kodu problem yaratabiliyor. %125 için ayrı belirtmek gerekebiliyor. Fakat bu aralıkların bir standartlarının var olduğu kanısındayım.

teşekkürler.

16-09-2021, 12:19:23

#2

canyucel

Birkaç paketin breakpointleri;
https://tailwindcss.com/docs/breakpoints
https://getbootstrap.com/docs/5.0/layout/breakpoints/

16-09-2021, 12:21:22

#3

Misafir

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

Merhaba arkadaşlar

front end tasarım yaparken sabit bir css breakpointler nelerdir? Mobil cihazlar, 13inc 15inc 16inc 19inc vb ekran çözünürlükleri için stabil sağlıklı media querryleri merak etmekteyim. 1920 ekranlarda windows çözünürlük %125 olduğunda dahi 1920 px için yazdığımız css kodu problem yaratabiliyor. %125 için ayrı belirtmek gerekebiliyor. Fakat bu aralıkların bir standartlarının var olduğu kanısındayım.

teşekkürler.

Böyle bir standart kullanamazsınız. Kodladığınız şey her zaman standartların dışına çıkacaktır. Binlerce, milyonlarca ekran genişlik ve yüksekliği var. Masaüstü versiyonunu kodladıktan sonra responsive kısmından yavaşça küçülterek kaç px de bozulma olduğuna bakıp media query yazmaya başlamalısınız. Net bir aralık kullanırsanız mutlaka bozulma vb. olacaktır.

16-09-2021, 12:29:00

#4

SercanSevincer

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

Böyle bir standart kullanamazsınız. Kodladığınız şey her zaman standartların dışına çıkacaktır. Binlerce, milyonlarca ekran genişlik ve yüksekliği var. Masaüstü versiyonunu kodladıktan sonra responsive kısmından yavaşça küçülterek kaç px de bozulma olduğuna bakıp media query yazmaya başlamalısınız. Net bir aralık kullanırsanız mutlaka bozulma vb. olacaktır.

Kullandığımız bilgisayarların kullanım yüzdesine vurduğumuzda genel olarak 1920px 1366px 1920px %125 mobil+tablet 768px gibi ölçüler mevcut. Zannediyorum ki genel bir standart ile frameworklerin yaptığı gibi vardır diye düşündüm.