Responsive Tasarım Nedir?

Responsive Tasarım Nedir?

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 nasıl yapılı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">

Sonrasında ise temiz bir html kodlaması yaptığımızı düşünerek css kodlaması üzerine değinmeye başlayalım.
Benim kullandığım telefon note 2 bu telefonun ekran çözünürlüğü ise 720 x 1280 dir denemeleri bu makinada deniyebileceğim şekilde yapmaya çalışalım.

Css dosyasının en altına mobil cihazımızın genişliğini tanımlayalım.

# 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.