Anasayfa / gitmek için tıklayınız
Responsive Tasarım Nasıl Yapılır
Responsive tasarımın ne olduğunu, önemini ve boyutları diğer haberlerimizde belirtmiştik.
Şimdide responsive tasarımın nasıl yapıldığına yani işin teknik kısmına geçelim. Öncelikle siz istediğiniz kadar css kodlama ile tasarımınızı responsive yapın ancak html kısmında
"<head> </head>"
tagları arasına
"<meta content="width=device-width, initial-scale=1" name="viewport" />"
mobil görünüm kodunu girmediğiniz sürece tasarımınız responsive olmayacaktır. Burada önemli bir not düşmem gerekiyor; biz aspnet ile kodlama yaptığımız için
"<meta content="width=device-width, initial-scale=1" name="viewport" />"
kodunu kullanıyoruz, diğer kodlama dillerinde bu kod değişebilir.
Html tarafını geçtiğimize göre responsive kodlamaya gelebiliriz. Daha önceki haberlerimizden alıntı yaparak responsive tasarım ölçülerini hatırlayalım;
Masaüstü, Laptop, Tablet ve mobil olmak üzere 4 standart ekran boyutu bulunmaktadır.
  • Responsive tasarım ile bilgisayar ekranı ve yatay tablet çözünürlüğü 1024 pixel,
  • Dikey tabletlerin ekran çözünürlüğü ise 768 pixel × 1023 pixel,
  • Dikey telefonların ekran çözünürlüğü 479 pixel,
  • Yatay ekran çözünürlüğü 480 pixel × 767 pixel'dir.
Responsive ekran ölçülerimize göre kodlamaya başlayabiliriz artık;
Ana divimize
<div class="news">Haber1</div>
diyecek olursak
Dikey telefonların ekran çözünürlüğü 479 pixel
@media screen and max-width(479px) { .news { width:100%; } }
Yatay ekran çözünürlüğü 480 pixel × 767 pixel
@media screen and (min-width:480px) and (max-width:767px) { .news { width:50%; } }
Dikey tabletlerin ekran çözünürlüğü ise 768 pixel × 1023 pixel
@media screen and (min-width:768px) and (max-width:1023px) { .news { width:33.333333%; } }
Bu şekilde sizlerde tasarımlarınızı responsive yapabilirsiniz, göstermiş olduğum ekran ölçüleri standart ölçülerdir sizler istediğiniz ekran ölçülerini girebilirsiniz. Sadece bu ölçüler girilecek diye bir zorunluluk yoktur.
28.3.2017 13:50:08