Web sitelerimizin front-end kısmını hazırlarken birçok farklı framework kullanabilmekteyiz. Boostrap, Foundation vb. bunların yanında en doğal yöntem olan ve hala kullanabilir olan kendimizin A’dan Z’ye kodlamış olduğu front-end sayfalarımız mevcut. CSS teknolojisini HTML ile dans ettirerek harika işler çıkaran arkadaşların karşılaşabileceği bir soruna değinmek istiyorum. CSS %125 çözünürlük problemi.
Farklı ekran boyutları için CSS’in bize sunmuş olduğu gerekli media screen aralıklarını kullanmamıza rağmen bazı zamanlar 1920×1080 ekranlarda görmüş olduğumuz görüntü ölçeklendirme kısmında %125 ekran kullanımı yazmıs olduğumuz css kodlarımıza eklemeler yapmamızı gerektiriyor.
Kullanmış olduğumu klasik media ölçülerinde @media screen and (max-width: 720px) { #kodlar buraya gelecek } 480px 720px 160px 1920px vb. ölçülerimizden ziyade bu sefer ekran ölçeklendirmesi için ayrı bir query oluşturmamız ve css kodlarımızı oraya yazmamız gerekecektir. Aşağıda ki kod bloğunu media querylerinizin en üstüne yazmanızı öneriyorum.
@media (-webkit-device-pixel-ratio: 1.25) {
#CSS kodları buraya gelecek.
} %125 ölçeklendirme için 1.25 değerini kullanmamız bizim için yeterli olacaktır. Direkt olarak %125 ekran ölçeklendirmesine css kullanarak müdahalede bulunabileceğiz. Farklı ölçülerin %125lik ekran ölçeklendirmesine müdahalede bulunmak istersen aşağıda vermiş olduğum kod bloklarında aralıklar belirterek farklı ekran çözünürlüklerinin ekran ölçeklendirmesine göre css kodlarınızı düzenleyebilirsiniz. Bu sayede CSS %125 çözünürlük problemi çözülmüş olacaktır.
@media (min-width: 1200px), (min-width: 960px) and (-webkit-device-pixel-ratio: 1.25) {
#Kodlarınız buraya gelecek
} Yukarıdaki ölçüler yeterli olacaktır. Mobil boyutlar için böyle bir ölçeklendirme henüz kullanan görmedim. 🙂 CSS %125 çözünürlük problemi ve üst ölçekler için bu css kodları sorununuzu rahatlıkla çözecektir. Farklı çözüm bulan arkadaşlar varsa yorumlarda belirterek herkese destek olabilir.
Diğer yazılarım arasında bulunan CSS ile Pop-up yapımına bakabilirsiniz.
