Web Site Tarayıcıda ve Cihazlarda Farklı Boyutta

Arkadaşlar selam, bir web sitesi var, fakat bu web sitesini mobilde açınca mobil uyumlu değil de bilgisayardaki tarayıcıdaki uyumuyla karşımıza çıkıyor. Bunu araştırdım responsive adı ile anlatılıyor. Fakat bana sağlıklı bir kaynak verecek var mı veya bu olayın responsive harici bir çözümünü sunacak?

Hocam pek bi alternetifiniz yok. ya tasarım reponsive olacak ya da bootstrap ı araştırabilirsin.

Eğer Pure CSS söz konusu ile px verdiğiniz bazı width değerlerine %'lik değer vererek responsive hale getirmek mümkün ama aynı zamanda @media (screen) bloğu içinde de de bazı küçük özelleştirmeler yapılmalı. Örneğin ekran çözünürlüğü 768px'den büyük olan bir cihaza sidebar width 30% content 70% olarak gösteriliyorsa daha küçük bir ekran için ikisine de 100% vererek alt alta listelenmesini sağlayabilirsiniz. Tabi bu aşamada display özellğine de yer yer dikkat etmekte fayda var.


@media screen and (max-width: 768px) {
/* Comes custom css */
}


Daha az zahmetlisi 'css responsive grid library' keyword'ü ile arama yapmak bir fm değil ama grid sistemi odaklı bu yüzden kullanımı kolay. Adından da anlaşılabileceği gibi grid sistemi üzerine sistemi inşa ediyoruz. Bunun en güzel kullanıldığı yerlerden biri de Bootstrap (stabil 4 sürümünü tavsiye ederim, 3.3'de var ve daha basit).