Responsive Tasarım Nedir?

Responsive tasarım nedir? Responsive tasarım nasıl yapılır? Tıkla Öğren!

Responsive Tasarım css kodlaması ile web site tasarımının farklı cihazlarda "Mobile, Tablet ve Masaüstü" vb.. cihazlarda ekran genişliği ve yüksekliğine göre tasarımın tekrar ayarlama yapılmasına yaramaktadır.

Responsive tasarım aslında çok büyütülecek bir konu olmadığını gün içerisinde pythontr.com un anasayfa ve makale içerikleri için yaptığım denemelerde görmüş bulunmaktayım. Lafı uzatmadan nasıl yapılacağını anlatmaya başlıyorum.

Öncelikle html içine daha doğrusu meta taglara aşağıdaki satırı yerletirin. Bu satır bizim cihazımıza göre ekranımızı resize edecektir.

<meta name="viewport" content="width=device-width,initial-scale=1">

# bu tanımlama ekran genişliği max 720 olanlarda geçerli olacaktır. Kodlamamızı daha doğrusu css tanımlarımızı yüzdelerle verirsek birçok cihaz için ayrı ayrı tanımlama yapmamıza gerek kalmaz.

.denemeClass {width:1024px;}
@media (max-width: 720px) {
.denemeClass {width:100%;}
}

Ardından iş pratik olsun diye var olan css inizi üst satırlardan kopy past ile yukarıdaki yazdığımız bloğa kopyalayın ve içini boşaltın. Sonra mobil cihazınızı açarak tek div lerinizin ve sabit genişliği olan objelerinizin genişliklerini yüzdelere cevirin. Benim yüzeysel olarak pythontr.com için yaptığım çalışma 1 saat civarı sürdü.

Not: Pythontr.com un css dosyalarını inceleyerek konuya daha hakim olabilirsiniz.